Clever Geek Handbook

Import all sass files into a directory using webpack

I am currently trying to use Webpack to bundle all my files and I have no idea how to proceed when working with multiple folders and .scss

files.

I've used grunt to do these tasks in the past, 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 ran a task to create a file named main.scss

containing everything @import

, like this:

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

Currently I specify an import inside my file .js

(used in conjunction with extract-text-webpack-plugin

) to define the file main.scss

, but each new import

or old has to be added / removed manually. Is there a way to automate this task using WebPack

?

+4


source to share


2 answers


Note - only works with webpack 2

(requires update for webpack 3 ^)

You can use the import-glob-loader

github / npm plugin

It supports with



@import "foo/**/*";

which outputs to

@import "foo/1.scss";
@import "foo/bar/2.scss";
@import "foo/bar/3.scss";
+4


source


when webpack 3 or 4

use this, github- node-sass-glob-importer

importorter

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: {
          importer: globImporter()
        }
      }
    ]


Use this method.

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


source






More articles:


All Articles