node-sass-glob-importer-deep

Custom node-sass package importer that allow you to use deep glob syntax in node-sass imports.

⚠ Please note, this importer is based on the node-sass-glob-importer npm package. Both packages will check automatically for nested directions, the different is that this deep package will shift all nested @import above in the sass imports hierarchy, during that the node-sass-glob-importer will stay at the same hierarchy pattern.

tree

1.
2├── gulpfile.js
3└── src
4    ├── components
5    │   ├── form
6    │   │   ├── error
7    │   │   │   └── _control.scss
8    │   │   ├── _control.scss
9    │   │   └── _group.scss
10    │   ├── _card.scss
11    │   └── _menu.scss
12    ├── _config.scss
13    ├── _functions.scss
14    ├── _mixins.scss
15    └── index.scss

./src/index.scss

1// Import all files inside the `components` directory and subdirectories and their subdirectories children and so on...
2@import "config";
3@import "functions";
4@import "mixins";
5@import "components/**/*";

E.G index.scss stream output before sass compilation

1@import "_config.scss";
2@import "_functions.scss";
3@import "_mixins.scss";
4@import "components/form/error/_control.scss"; // ← Has been shifted above in the SASS imports stack hierarchy 
5@import "components/form/_control.scss";
6@import "components/form/_group.scss";
7@import "components/_card.scss";
8@import "components/_menu.scss";

Usage

gulp

1const { src, dest, series } = require('gulp');
2const sass = require('gulp-sass')( require('node-sass') );
3const globImporterDeep = require('node-sass-glob-importer-deep');
4
5const styles = () => {
6    return src('./src/index.scss')
7        .pipe(sass({
8            importer: globImporterDeep()
9        })
10        .on('error', sass.logError))
11        .pipe(dest('./dist/css'))
12};
13
14exports.default = series(styles);
15

webpack

1// webpack.config.js
2const globImporterDeep = require('node-sass-glob-importer-deep');
3const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4
5module.exports = {
6  module: {
7    rules: [
8      {
9        test: /\.scss$/,
10        use: [
11          {
12            loader: MiniCssExtractPlugin.loader,
13          },
14          {
15            loader: 'css-loader'
16          }, {
17            loader: 'sass-loader',
18            options: {
19              implementation: require('node-sass'),
20              sassOptions: {
21                importer: globImporterDeep()
22              }
23            }
24          }
25        ]
26      }
27    ]
28  },
29  plugins: [
30    new MiniCssExtractPlugin({
31      filename: 'style.css'
32    })
33  ]
34}

See Also

• node-sass-glob-importer

Credits

• Markus Oberlehner

License

MIT