1. node-sass-glob-importer
Custom importer for node-sass which makes it possible to use glob syntax in Sass import statements
node-sass-glob-importer
Package: node-sass-glob-importer
Created by: maoberlehner
Last modified: Sun, 02 Jul 2023 09:40:19 GMT
Version: 5.3.3
License: MIT
Downloads: 212,811
Repository: https://github.com/maoberlehner/node-sass-magic-importer

Install

npm install node-sass-glob-importer
yarn add node-sass-glob-importer

node-sass-glob-importer

Patreon
Donate
Build Status
Coverage Status
GitHub stars

Custom node-sass importer to which allows you to use glob syntax in imports

Globbing allows pattern matching operators to be used to match multiple files at once.

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

Usage

 const sass = require('node-sass');
const globImporter = require('node-sass-glob-importer');

sass.render({
  ...
  importer: globImporter()
  ...
});

webpack

 // webpack.config.js
const globImporter = require('node-sass-glob-importer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader'
          }, {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                importer: globImporter()
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
}

CLI

 node-sass --importer node_modules/node-sass-glob-importer/dist/cli.js -o dist src/index.scss

Upgrade from 3.x.x to 5.x.x

It is not possible anymore to set the includePaths option when initializing the importer. Use the node-sass includePaths option instead.

Why is there no 4.x version?

This module is maintained in one repository together with multiple other node-sass custom importers. The node-sass-magic-importer repository is using a monorepo approach with fixed versions for all packages. The projects maintained in the node-sass-magic-importer monorepo started out as separate repositories with separate versioning, so when they were integrated into the monorepo, the versions of all projects were raised to 5.0.0 and are in sync since then.

node-sass-magic-importer

This module is powered by node-sass-magic-importer.

About

Author

Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin