1

I have the following project:

package.json

yarn.lock

node_modules/

src/
   pages/
     home/
       home.html
       _home.scss

     about/
       about.html
       _about.scss
   
   index.html

   styles/
     global.scss

It is my first time using sass, but I understand that it needs to be compiled to normal css... My question is: do I have to compile all my sass files one by one?

Is it possible to run a yarn script targeting all the scss files of the project?

package.json
-------------

"scripts": {
  "build-sass": "run something here",
}

Remember, I am newbie with the scss technology.

disinfor
  • 10,865
  • 2
  • 33
  • 44
Raul
  • 2,673
  • 1
  • 15
  • 52
  • This is kind of a bigger question. Are you using includes? Usually the way the compiler will work is it will compile ALL scss files within a directory that *do not* have the `_` underscore prefix and output them to individual CSS files. You can use a wildcard `*` selector to watch a directory. OR, if you are using includes, you only need to compile the *parent* scss file. Again, yarn should compile anything without an `_` prefix to a single CSS file to the directory you specify. I would [watch this video](https://www.youtube.com/watch?v=Mh-0Hoid9rQ) to help you setup your package file. – disinfor Jun 28 '22 at 20:43

1 Answers1

0

Install node-sass yarn add node-sass -D

Then add this to your script

"scripts": {
  "build-sass": "path/to/global.scss --output path/to/output-folder --output-style compressed"
}

Note: only add --output-style compressed if you want the output to be compressed

gentle
  • 15
  • 7