Import all sass file within directory with webpack
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-*';
Note - only works with webpack 2
(requires update for webpack 3^)
You could use the plugin import-glob-loader
github / npm
It supports globbing with
@import "foo/**/*";
which outputs to
@import "foo/1.scss";
@import "foo/bar/2.scss";
@import "foo/bar/3.scss";