Compiling watch SCSS Many-to-One CSS

0
votes

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

2
csssass
maybe a typo? is the dot before assets/css/scss/style.scss correct or does it reference the actual folder? – deelde
Using underscores usually mitigates includes from getting compiled separately. So, call the @imports as you are, but the actual SCSS file rename to _test1.scss, etc. – disinfor
@deelde it was working with node but trying to run sass --watch .assets/css/scss/:assets/css i just had 2 blue screen in a row... @disinfor which command should i use (considering sass without node is causing some blue screen)? do i also have to rename the file test1 or is it just into the style.scss with the import ? – Mugo
You need to rename the actual SCSS file with an underscore. In your @import you remove the underscore (so you keep what you currently have). Your --watch should pick up anytime you save an include file and recompile to your styles.css – disinfor

2 Answers

1
votes

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.

0
votes

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.