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?
CodePudding user response:
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.
CodePudding user response:
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
.
CodePudding user response:
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
.
CodePudding user response:
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