$ npm install node-sass-selector-importer
With selector importing, it is possible to import only certain CSS selectors form a file. This is especially useful if you want to import only a few CSS classes from a huge library or framework.
const sass = require('node-sass');
const selectorImporter = require('node-sass-selector-importer');
sass.render({
...
importer: selectorImporter()
...
});
// Example:
@import '{ .btn, .btn-alert } from style.scss';
// Result:
.btn { }
.btn-alert { }
// Example:
@import '{ .btn as .button, .btn-alert as .button--alert } from style.scss';
// Result:
.button { }
.button--alert { } // Transformed to match BEM syntax.
// Example:
@import '{ /^\..+-alert/ } from style.scss';
// Result:
.box-alert { }
.btn-alert { }
// Example:
@import '{ /^\.btn(.*)/ as .button$1 } from style.scss';
// Result:
.button { }
.button-alert { }
Bootstrap is a mighty and robust framework but most of the time you use only certain parts of it. There is the possibility to customize Bootstrap to your needs but this can be annoying and you still end up with more code than you need. Also you might want to use just some specific parts of Bootstrap but your project uses the BEM syntax for writing class names.
// This example uses the v4 dev version of the Bootstrap `alert` component:
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_alert.scss
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/border-radius';
@import 'bootstrap/scss/mixins/alert';
@import '{
.alert,
.alert-dismissible as .alert--dismissible,
.close as .alert__close
} from bootstrap/scss/alert';
// Result:
.alert {
padding: 15px;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert--dismissible {
padding-right: 35px;
}
.alert--dismissible .alert__close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
// webpack.config.js
const selectorImporter = require('node-sass-selector-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: selectorImporter()
}
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
}
node-sass --importer node_modules/node-sass-selector-importer/dist/cli.js -o dist src/index.scss
It is not possible anymore to set the includePaths
option when initializing the importer. Use the node-sass includePaths option instead.
This module is powered by node-sass-magic-importer.
Selector filtering goes only one level deep. This means, if you're importing a file with selector 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 selectors 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.
Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner
MIT
© 2010 - cnpmjs.org x YWFE | Home | YWFE