Bundle sass files into single sass file

Question

TL;DR: My question is how to bundle some of my sass files into single sass file?

I've been developing an Angular component library and I package it with ng-packagr. Let's call it @my-lib/ngx-components.

Consumers of my lib will import my components like @my-lib/ngx-components/navbar.

I decided to add theming support to components.

For example, I have a navbar component with default colors (background, text, hover etc.) I want consumers of my library to be able to override these colors with their own theme. That's why I've written a mixin which takes a $theme input and override some css rules as follows (this is a basic version of what I have)

_navbar-theme.sass

@mixin navbar-theme($theme) 
    $primary-color: map-get($theme, primary-color)
    $secondary-color: map-get($theme, secondary-color)
    $color: map-get($theme, color)

    .navbar
         background-color: $primary-color
         color: $color
         &:hover
               background-color: $secondary-color

Each component has its own *-theme.sass file.

I also have global _theming.sass file which imports all of these as follows

_theming.sass

@import './components/navbar/navbar-theme'
@import './components/button/button-theme'
@import './components/dropdown/dropdown-theme'

I want to export this _theming.sass file from my lib, so people can import this file in their own sass file as @import '~@my-lib/ngx-components/theming' and start using all of the mixins available. If they want to have custom navbar, button etc, they should be able to use those mixins with single import.

I tried to make it look like angular-material theming setup.

At first, I have tried node-sass which is already in my dependencies. But, it tries to build sass into css so it omits mixins in the output file.

Then, I looked at what angular-material has done. They use scss-bundle

I thought "this is exactly what I want." However, it requires scss files, not sass files. It cannot read sass files.

Then, I thought "Okay, I can give up on sass and start using scss. How do I convert all those files to scss without going through them by hand". Then, I found sass-convert. In this question it was said that I can use it within command line. However, when I install sass-convert with npm globally, it didn't give me a command line executable. I think I need Gulp to use it.

I've been avoding to use Gulp from the beginning, because it means another tool to learn and it adds complexity to codebase.

At this point, I feel like "Hal fixing light bulb"

TL;DR: My question is how to bundle some of my sass files into single sass file?

Also, If you can come up with a solution that requires webpack, that's fine too.

hendrathings · Accepted Answer · 2018-03-23T07:57:19.983

Let's through your opinion or questions:

I want to export this _theming.sass file from my lib, so people can import this file in their own sass file as @import '~@my-lib/ngx-components/theming' and start using all of the mixins available. If they want to have custom navbar, button etc, they should be able to use those mixins with single import.

You need to know, what is your target audience. Mostly people using angular cli for create their app like template scratch.

So you need provide css bundle (people just want import your css) and sass bundle (who want to use your object or your mixin).

I want to export this _theming.sass file from my lib, so people can import this file in their own sass file as @import '~@my-lib/ngx-components/theming' and start using all of the mixins available. If they want to have custom navbar, button etc, they should be able to use those mixins with single import.

I tried to make it look like angular-material theming setup.

Firstly, you need to know that @angular/material doesn't export sass (they use scss) but they export css thene compiled by scss-bundle (as you mention it) see their code and documentation theme.

I thought "this is exactly what I want." However, it requires scss files, not sass files. It cannot read sass files.

I would like quote this answer:

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

It is better you need transfer your code from sass to scss (by yourself), it would not much to do it (I think, I always write scss instead sass file).

Solution:

1. Provide css and sass (scss better)

When you deliver your component libs, You have to provide css and scss. Beacuse angular cli doesn't provide scss loader by default.

Don't use sass file, use scss file see my refer answer on top.

scss-bundle + webpack

Since you have to provide css, you can you webpack shell plugin to bundle scss. Scss have provide cli, if you want to use cli.

2. Structure your scss

Okay, let's take sample from bootstrap@4 module for this case. Bootstrap use structure like this (Documents):

scss
|-- _variables.scss
|-- _mixins.scss
|-- _functions.scss
|-- ...
|-- index.scss

inside index.scss will have like this:

@import 'variables'
@import 'mixins'
@import 'functions'
...

so, this scss you have to deliver beside css. Like bootstrap do, then mixin will available to consumer. Also this good approach when consumer to find scss file in scss folder (easy to pointing which is scss put in).

UPDATE

For bundle to single file you have to create task runner to do it. In your case you want to use webpack, you can create a plugin to do it.

Here example plugin:

scss-bundle-plugin.js

call to you config webpack:

plugins: [
   new webpack.NoEmitOnErrorsPlugin(),
   new SCSSBundlePlugin({
        file: path.join(__dirname, 'src/index.scss')
   })
],

To try playground, checkout hello-world-loader then:

# install dependency
npm install
# try play ground
npm run webpack

it will create file _theme.scss at ./dist.

My advice don't use webpack, use task runner instead (gulp or grunt) for this simple case. Webpack too advance and hard to write task.

I already provide css within my lib. I just want to bundle some mixins together and ship single `theming.scss` file. As you suggested, I want to change my sass files to scss. However, there are many of them. I could not find an easy way to do it. If you can help me with that, I'll give you the bounty. — Bunyamin Coskuner, Mar 22 '18 at 19:42
Thanks, I'll check it out. Does it work with sass files as well or do I still need to convert them? — Bunyamin Coskuner, Mar 23 '18 at 08:02
@BunyaminCoskuner, I target to scss file, just clone and `npm run webpack`. If you want to try with `sass`, change `.scss` extension in `webpack.config.js` and `scss-bundle-plugin.js` with `.sass` extension. this is just give you an idea — hendrathings, Mar 23 '18 at 08:05
Okay, will try it and let you know the outcome within few hours. Thanks for your help. — Bunyamin Coskuner, Mar 23 '18 at 08:06
I cloned your repo, it worked as is. When I changed `.scss` files to `.sass` and edited `webpack.config.js`, it couldn't read the files. I think I need to convert them, but I have too many sass files and it would take hours to convert them by hand. Do you have any idea how to do that? — Bunyamin Coskuner, Mar 23 '18 at 11:28
@BunyaminCoskuner, what sample syntax for import? I have use parse import like this `@import "foo";` — hendrathings, Mar 23 '18 at 11:30
I just checked it and it works! Thank you for your help! Now, I have an example from which I can work on. Enjoy your bounty :) — Bunyamin Coskuner, Mar 23 '18 at 12:58

score 2 · Answer 2 · edited Apr 22 '20 at 08:31

2

There is also a widely used package, called scss-bundle.

It is quite simple to use, you just create a config file with all relevant configuration and then run scss-bundle.

This for example will use all scss files, imported in entry.scss and move it to out.scss. All imports will be resolved, except for angular themes in this example, like @import '~@angular/material/theming';.

scss-bundle.config.json:

{
  "bundlerOptions": {
    "entryFile": "my-project/src/entry.scss",
    "outFile": "dist/out.scss",
    "rootDir": "my-project/src",
    "project": "../../",
    "ignoreImports": [
      "~@angular/.*"
    ],
    "logLevel": "debug"
  }
}

edited Apr 22 '20 at 08:31

Markus Pscheidt

6,853
5
55
76

answered Mar 27 '20 at 13:05

Akora

756
7
22

Thank you for your interest in this question. I've solved it long time ago. My initial problem was that I was using `sass` instead `scss`. That's why I couldn't use that package at first. – Bunyamin Coskuner Mar 27 '20 at 13:12
2

ah, good to know! Thought it might be helpful for some other guys reading this question :) – Akora Mar 27 '20 at 13:30
Add comment that angular material (angular components) use it. – Stanislav Berkov Jun 19 '20 at 14:14

Vitalii · Answer 3 · 2018-03-27T09:03:38.907

0

My solution for scss / sass files I've used small module bundle-scss

It bundles files by file name mask. So you need to pass correct mask like ./src/**/*.theme.scss specify destination file and maybe your custom sort-order

You don't have to create one entry point file with all imports. bundle-scss will get all files by mask analyze all imports and include this files as well

edited Mar 27 '18 at 09:03

answered Mar 23 '18 at 06:36

Vitalii

153
5

The problem is my files are `sass` files. If I can convert them to `scss` files, then I can take care of the rest. It would be too much work to convert them by hand. Is there any tool that handles this process? – Bunyamin Coskuner Mar 23 '18 at 06:40
actualy, I can extend that module to using with `sass`also – Vitalii Mar 26 '18 at 09:42
Bundle-scss Supports sass as well – Vitalii Apr 04 '18 at 04:42
how to run it in vanilla js and not s – Chris Tarasovs May 14 '18 at 20:49
It Is better to run it within the build process. in node you can do sth like `const bundleScss = require("bundle-scss"); bundleScss(mask, dest, sort?)` as result package save the result file on disk. and you can process with node-sass – Vitalii May 23 '18 at 13:20

Bundle sass files into single sass file

3 Answers3

Solution:

1. Provide css and sass (scss better)

2. Structure your scss

UPDATE