Import all sass file within directory with webpack

Question

I'm currently trying to use Webpack to bundle all my files and I don't know how to proceed when dealing with multiple folders and .scss files.

I used to use grunt to do these tasks, and this is an example of my folder structure:

functions
    - _mixin.scss
    - _function.scss
    - [...]
variables
    - _colors.scss
    - _typo.scss
    - [...]
ui
    - _button.scss
    - _grid.scss
    - [...]
view
    - _home.scss
    - _about.scss
    - [...]

With Grunt I would run a task to generate a file called main.scss containing all the @import, for example:

@import 'function/_mixin.scss';
@import 'function/_function.scss';
@import 'variables/_colors.scss';
@import 'variables/_typo.scss';
[...]

Currently I'm specifying an import inside my .js file (used in conjunction with extract-text-webpack-plugin) to define the main.scss file, but each new import, or old one, needs to be added/removed manually. Is there a way to automate this task with WebPack?

Answer 1

When webpack 3 or 4

Use node-sass-glob-importer

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require('node-sass-glob-importer');

    ...
    test: /\.(scss|sass)$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "sass-loader",
        options: {
          sassOptions: {
            importer: globImporter()
          }
        }
      }
    ]

Use this way.

// Import all files inside the `scss` directory and subdirectories.
@import 'scss/**/*.scss';
@import 'scss/component-*';