Node-sass with multiple input files

Question

I'm using node-sass directly from the command line (a Makefile, really) to build my CSS.

The scss files are in different directories and they don't refer to each other. What I'd want to have is sassify these files to a single CSS output that I can read in from the HTML - with working source maps.

This is the current command I have in the Makefile:

$(OUT_MAIN_CSS): $(SCSS) Makefile $(node-sass)
    cat $(SCSS) > $(TMP_SCSS)
    $(node-sass) --output-style compressed --source-map $(OUT_MAIN_CSS).map $(TMP_SCSS) $@
    rm $(TMP_SCSS)

OUT_MAIN_CSS is out/bundle.css. SCSS is a list of the input files. node-sass is node_modules/.bin/node-sass.

I'd like to have a one-liner and not need a temporary file. Also, I'd like my source map references (for debugging) to lead to the original files, not the temporary file.

node-sass syntax 1

node-sass [options] <input.scss> [output.css]

Here, node-sass insists on having just a single input file. If I have two or more, the second one gets treated as output, and its contents overridden.

There are some options for an "input directory" and "output directory" but I don't want to constrain my build processes by such rather arbitrary restrictions (yes, eventually I shall bend...).

node-sass syntax 2

cat <input.scss> | node-sass [options] > output.css

This is more in line with the Unix mentality. Problem is twofold. My output file is in a subdirectory (out/bundle.css), which confuses source map references since node-sass has no idea of the output path.

There seems to be --source-map-root for that but I didn't get it to work...

I'm clearly placing a square bolt in a round hole here, am I not? How would you do this?

Is the best way to simply have one ring.scss in the root, to gather all the unrelated pieces together, and then sassify that?

Answer 1

For example, if you want to compile each *.scss file in folder src/assets/scss and output resulting *.css files into folder dist you can add script into your package.json file:

{
  "scripts": {
    "build:css": "node-sass -o dist src/assets/scss/",
...

and run compilation process from command line with:

npm run build:css

if you want to compile recursively, add --recursive flag in command:

{
  "scripts": {
    "build:css": "node-sass --recursive -o dist src/assets/scss/",
...

Answer 2

node-sass <input1.scss> [output1.css] && node-sass <input2.scss> [output2.css]

 "scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css && node-sass sass/mobile.scss css/mobile.css"

},