vite-plugin-sass-glob-import
v4.0.0
Published
Use glob syntax for imports in your main Sass or SCSS file.
Downloads
43,531
Readme
vite-plugin-sass-glob-import
Use glob syntax for @import or @use in your main Sass or SCSS file.
Install
npm i -D vite-plugin-sass-glob-import
// In vite.config.js
import { defineConfig } from 'vite'
import sassGlobImports from 'vite-plugin-sass-glob-import';
export default defineConfig({
plugins: [
sassGlobImports()
]
});
Usage
Note: Globbing only work in a top-level file, not within referenced files.
// In src/styles/main.scss
@use 'vars/**/*.scss';
@import 'utils/**/*.scss';
@import 'objects/**/*.scss';
The above will be transformed into something like the following before Vite processes it with Sass:
@use 'vars/var-a.scss';
@use 'vars/var-b.scss';
@import 'utils/utils-a.scss';
@import 'utils/utils-b.scss';
@import 'objects/objects-a.scss';
@import 'objects/objects-b.scss';
@import 'objects/objects-c.scss';