DEV Community

Cover image for Sass Setup and Basic Use
Connor Dillon
Connor Dillon

Posted on

Sass Setup and Basic Use

How to Set Up Sass Using NPM

  1. In main project folder, (outside of dist folder if using one), create a folder called scss, and main.scss file within the new scss folder.

  2. Right click up-one-level folder from dist and open in terminal (i.e. in terminal, go to your dist folder, then do '$ cd ..')

  3. In terminal, do $ npm init to create a package.json file.

  4. Enter package name and details.

  5. In terminal, do $ npm i node-sass to initialize sass.

  6. Open package.json file, change:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"},
Enter fullscreen mode Exit fullscreen mode

to:

"scripts": {
    "sass": "node-sass -w scss/ -o dist/css/ --recursive"},
Enter fullscreen mode Exit fullscreen mode

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">

  1. In your terminal, start the Sass script with: npm run sass.

  2. 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 to main.scss.

Discussion (0)