How to Set Up Sass Using NPM
In main project folder, (outside of dist folder if using one), create a folder called
scss
, andmain.scss
file within the newscss
folder.Right click up-one-level folder from dist and open in terminal (i.e. in terminal, go to your dist folder, then do '$ cd ..')
In terminal, do
$ npm init
to create a package.json file.Enter package name and details.
In terminal, do
$ npm i node-sass
to initialize sass.Open
package.json
file, change:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"},
to:
"scripts": {
"sass": "node-sass -w scss/ -o dist/css/ --recursive"},
NOTE: File directories in the script must match your folder layout!
For example, if you don't have a dist/
folder, just use ... -o css/ --recursive
instead.
NOTE: Make sure to point your stylesheet correctly in your html code!
For example, if using main.scss
(and thus main.css
), use: <link rel="stylesheet" href="css/main.css">
In your terminal, start the Sass script with:
npm run sass
.In
main.scss
, start writing your sass.
NOTE: Do not edit your
main.css
file. The Sass compiler will overwrite any changes you might make, so be sure to write your CSS directly tomain.scss
.
Top comments (0)