I have a website project with the main folder on my desktop with a Css folder inside is the style.css
and have installed Sass in Visual Studio Code Have Windows 10 operating system with node sass for windows running with npm
Sass file structure architecture has one file for each part of the website with a _base.scss file for color variable and font variables etc. And a main.scss file for the @imports
my index style sheet
<link rel="stylesheet" href="css/style.css">
within the Main Sass folder in my VSC project I now see a css-style.css sitting there with the other individual .scss files. Is this correct?
json file
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css output-style compressed",
"build": "npm-run-all compile:sass prefix:css compress:css"
index file is
<link rel="stylesheet" href="css/style.css">
You can define a path for your style.css. Basically you can do this:
sass your/path/to/style.scss your/path/to/style.css
If you execute the sass command in your sass folder, it will create a ".css" in this folder.
Maybe you find help in this guide -> https://sass-lang.com/guide