DEV Community

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

Posted on

Sass Setup and Basic Use

#css #sass

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.

Top comments (0)