Filter certain elements from SCSS code.
const sass = ;const filterImporter = ;sass;
// style.scss:;;.selector// Result:;;
- silent: Extract only nodes that do not compile to CSS code (mixins, placeholder selectors, variables,...)
- make-your-own: Define custom filters
In the example below you can see the default configuration options.
customFilters: Define custom node filters.
const sass = ;const filterImporter = ;const options =customFilters:// Add a node filter for a specific min-width media query.customMediaWidth:property: 'type' value: 'atrule'property: 'name' value: 'media'property: 'params' value:'(min-width: 42em)'// Add a node filter for print media queries.customMediaPrint:property: 'type' value: 'atrule'property: 'name' value: 'media'property: 'params' value: 'print';sass;
// Sass file which implements filter importing.;
// CSS output – the `min-width: 43em` media query gets not imported.
// webpack.config.jsconst filterImporter = ;const ExtractTextPlugin = ;moduleexports =module:rules:test: /\.scss$/use: ExtractTextPluginplugins:filename: 'style.css'
node-sass --importer node_modules/node-sass-filter-importer/dist/cli.js -o dist src/index.scss
Upgrade from 1.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 2.x, 3.x or 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.
This module is powered by node-sass-magic-importer.
Multi level filtering
Filtering goes only one level deep. This means, if you're importing a file with filtering which is importing other files, those files are not filtered but imported as is. On a technical level, there is no good solution for this problem. One possibility would be to just pass the filters to all imports in the line but this carries the risk of filtering nodes on which one of the imported files might depend and therefore break the import. I might add this as an optional feature (which can be activated on demand) in the future – let me know if you're interested in multi level filter imports.