'Compiling watch SCSS Many-to-One CSS

I'm trying to find a way to compile my multiple scss files into one css file.

scripts are in package.json using node-sass

The best I've found for the moment is : sass --watch .assets/css/scss/:assets/css

The problem is it creates one css file for each scss file plus a css map file. I was previously working without watch node-sass --include-path scss .assets/css/scss/style.scss assets/css/style.css but had to run the command at each save.

Using sass --watch .assets/css/scss/style.scss:assets/css/style.css with style.scss like this :

@import 'test1.scss'; @import 'test2.scss'

is not working but console say :

Compiled style.scss to style.css. Compiled test1.scss to test1.css

Am i missing something?

EDIT : for some reasons, running only sass without node on a subsystem linux is causing some blue screen. Using node-sass --watch ./assets/css/scss/style.scss:assets/css/style.css or node-sass --watch ./assets/css/scss:assets/css return a npm error : code ELIFECYCLE errno 1

csssass


Solution 1:[1]

I've tried different solutions and the one that worked for what i wanted was that one : Using node sass watch with npm

Had the remove the dependencies and the directory bacause i have to write on only one file.

have to run this one to make it work

"css-watch: node-sass --include-path scss ./assets/css/scss/style.scss -w /assets/css/style.css"

including files in the style.scss without _ in the name is working fine with a simple import and detect all updates in the imported files.

Solution 2:[2]

Given the following directory structure

root
|- src
|  |- collect
|  |  |-collect.scss
|  |- pack-a
|  |  |-a.scss
|  |- pack-b
|  |  |-b.scss
|- build (generated)
|  |- collect
|  |  |-collect.css
|  |- pack-a
|  |  |-a.css
|  |- pack-b
|  |  |-b.css

and collect.css with the following content

// ./src/collect/collect.scss
@import "../pack-a/a.scss";
@import "../pack-b/b.scss";

(i) run sass ./src/collect:./bld/collect to generate ./bld/collect/collect.css

(ii) run sass ./src:./bld to generate all

Solution 3:[3]

All your SASS partials should be renamed to begin with an underscore character: _.

From the SASS Basics guide:

A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

You can continue to import the partial files into your main styles.scss file the same way, using their normal names and omitting the underscore character. You can also omit the '.scss' if you'd like. To follow the new SASS syntax version you should be using @use to import partial SASS files as a module, rather than @import.

Then you just transpile that main build file and it should work fine.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 01pi
Solution 3

Related Questions