Multiple scss into 1 .css file

[BorisBertelsen]

I haven't been able to find an answer anywhere - or I might not have understood the solution.

I have multiple scss files that I would like to compile into 1 minified .css file. At the moment, if I make a change in frontpage.scss it outputs frontpage.css, this is not the desired behavior because I include only 1 minified .css file in my document.

Is it possible to compile all .scss files in a given folder, to 1 main.min.css file?

Cheers, Mike

PS. Thank you for the effort put into this plugin!

[61pixels]

You need to look up and use partials to do what you want. Partials are files that get included in your main SASS files and won't generate their own CSS files upon compiling.

For example you have your main.scss file, then a folder called /partials/ with multiple other SASS files in there. A Partial is a SASS file that the filename starts with an underscore _ So for example, _buttons.scss or _reset.scss.

In your main.scss file you'd just include them like @import "partials/reset"; all of these partials are then pulled in and compiled with the single main.css file that is generated and that's it.

[Andreas-Individuelle-Karte-de]

Hallo 61pixels, but how to setup, that when i change "_buttons.scss" from your example, it automatic compile main.scss?

[61pixels]

Hallo 61pixels, but how to setup, that when i change "_buttons.scss" from your example, it automatic compile main.scss?

Make sure you are including your partial appropriately in your main.scss file ( for example: @import "partials/buttons"; if your partial is in a partials folder relative to your main.scss file and is called _buttons.scss ), and then as long as you have "Watch SASS" enabled in VSCode for the project you're working on (click on it in the bottom right of VSCode and it wall change to "Watching..."), any save to any of the files partials or non should compile everything automatically.

[jamiematrix]

@61pixels Do the partials have to be within a "partials" folder for CSS to be compiled? All the projects I've taken on have all the SCSS files in the same directory (it would make more sense if partials were in their own folder). -- EDIT -- I've moved all partials into a /partials folder and made a change to one, but the CSS still doesn't compile. In VS Code's output window I get the following:

Change Detected...
_variables.scss
--------------------
Compiling Sass/Scss Files: 
--------------------
Watching...
--------------------

The CSS doesn't compile with the new values. If I make a change in the "main.scss" file, then I get the following:

Change Detected...
main.scss
--------------------
Generated :
/path/to/project/css/style.css
/path/to/project/css/style.css.map
--------------------
Watching...
--------------------

-- EDIT 2 -- Looks like I have it working! It's my own fault ... maybe. I'm in a Craft CMS project that has a couple of folders that can contain (possibly) hundreds of SCSS and CSS files. I had set VS Code to only include the "main.scss" file I was editing - looks like this stops the plugin from reading any partial file too. Instead, I've excluded the folders that contain third party styling that I won't be changing.

[5AMsan]

Exact same issue here. I have to modify app.scss (containing @import) to update app.css. settings.json looks like :

"liveSassCompile.settings.includeItems": [
        "src/scss/*",
],
"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "assets/css",
        }
]

[moreno-livak]

Thanks works for me