Bundle sass files into single sass file

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"
  }
}

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.