Modern Sass Glob Importer

A custom importer for Sass that expands glob patterns.

@use "components/**/*.scss";
@use "elements/**/*.scss";

Description

While there are a number of Sass glob importers available, none of them currently work with the modern JS API or support @use statements. This importer only works with the modern API and has no intention of working with the legacy API.

Features

• Expands *.glob patterns to their matching files
• Imports from both @use and @import statements
• Supports nested imports
• Works with vite, webpack, etc, or standalone

Installation

npm install modern-sass-glob-importer

Usage

Vite

import { defineConfig } from "vite";
import globImporter from "modern-sass-glob-importer";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        importers: [globImporter()]
      }
    }
  }
})

Standalone

const sass = require("sass");
const globImporter = require("modern-sass-glob-importer");

sass.compile("path/to/style.scss", {
  importers: [globImporter()]
})

License

MIT