'In what way can we compile our scss or sass file to the css file?

I am learning about sass and I am wondering how we should give a link in our CSS stylesheet. I know sass files are stored differently but should we address it like this:

<link rel="stylesheet" href="mystyle.css" />

and then add a link to mystyle.scss then?

htmlcss


Solution 1:[1]

TL;DR: You cant use precompiled Style in your DOM.

SASS is a scripting language written in Ruby. You must compiled first because by default your browser understand only CSS. If you want that your browser compile your SASS files your can use some Libraries which compile your style to CSS. For example: https://github.com/slymax/sass-link

But regular you compile your SASS File first on your machine and then you link only to the CSS.

Solution 2:[2]

SASS cannot be directly linked via a stylesheet. It is a CSS preprocessor and is compiled down to regular css. You'll wanna install sass using npm (npm i sass) and do npx sass --watch scss:css for it to compile. (here scss is the sass directory and css is the css directory, it may be different for you). If you do npm i sass -g you wont need to include the npx since you installed it globally. You can then simply link your css to your index.html.

Solution 3:[3]

In the end you're always connecting your .css file to your style sheet. Never the scss/sass file itself.

You could use the VSCode (or any other IDE) Sass compiler plugin. But I prefer to do it manually as the compilers sometimes result in bugs for me.

I personally do the following:

In your terminal enter the following to install in your project directory:

npm install sass --save(previously dart-sass)

npm install bootstrap --save

npm install autoprefixer

or in one line:

npm install sass bootstrap autoprefixer --save

Within your project root create a "scss" folder, and within that, a file named "styles.scss"

This will be the file from which all imported sass is compiled into your destination.css file.

Then, you must create a script in your package.json to the scripts. I use the following:

"compileSass": "sass --watch scss:public/css"

Please note that the --watch means that whenever you save your modified. Please note that the public/css dictates where the compiled file will be saved relative to your scss folder you just created.

In a new tab in your terminal, start your compiler by entering

npm run compileSass

Or whatever name you gave to your script in the package.json file.

THEN when you link your CSS file as a stylesheet it will be the compiled CSS that was generated from your styles.scss.

Solution 4:[4]

You should put all the file path.

Exemple :

<link rel="stylesheet"href="C:\Users\Name\Documents\HTML & CSS\style.css" />

For sass it's easy : How to import SCSS files into HTML files

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Reuben Menezes
Solution 3 Tyler2P
Solution 4 Mohamed Zahour

Related Questions