0

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

Mugo
  • 36
  • 1
  • 6
  • maybe a typo? is the dot before assets/css/scss/style.scss correct or does it reference the actual folder? – deelde Feb 03 '20 at 19:45
  • 1
    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 Feb 03 '20 at 19:51
  • @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 Feb 03 '20 at 20:25
  • 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 Feb 03 '20 at 22:42

3 Answers3

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

haluk.bingol
  • 21
  • 5
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.

Mugo
  • 36
  • 1
  • 6
  • hey, I have a need of having to create a styleguide for a couple projects. Do you know of a way to create a NPM package that exports ".scss" files so I can INCLUDE them in my consumer projects.. so, my NPM package would be used like so: import '@mystuff/styles/_colors.scss'.. or import '@mystuff/styles/_typography.scss'.... and in my "styleguide project". I can modify them etc.. THEN build again to npm... and then bump my versions in my various projects.. is this something you know how to do? – james emanon Jun 09 '20 at 05:52
0

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.

Stephen M Irving
  • 1,324
  • 9
  • 20
  • What am i really looking for is trigger the watch when an update is done to a file into the scss folder. The only way for me to make the script works is to have as the input style.scss and style.css as the output but can't work with --watch since there is no update on style.scss. I'm sorry if my post wasn't clear – Mugo Feb 03 '20 at 21:41
  • No, it should work perfectly fine with --watch. If you are importing a file into style.scss and transpiling style.scss, it will recompile anytime style.scss changes or anytime any file being imported into style.scss changes. I do this every single day. – Stephen M Irving Feb 03 '20 at 21:53
  • Alright so there might be something wrong in my script : `"build-css": "node-sass --include-path --watch scss ./assets/css/scss/style.scss assets/css/style.css"` – Mugo Feb 03 '20 at 21:59