bootstrap-stylus
bootstrap-stylus copied to clipboard
Webpack's CSS Module and PostCSS loaders underisbly applied on Bootstrap as well
Importing bootstrap from a styl file that's processed by Webpack also applies the other loaders like CSS Module, and post CSS etc, which you don't really want to be applied to Bootstrap.
For example:
@require 'bootstrap/buttons'
.my-button
@extend .btn
@extend .btn-default
outputs:
._15m-nPgLAagtEApgyFagIx /* << CSS Module-arized*/
.my-button:hover,
.btn:focus,
.my-button:focus,
.btn.focus,
.my-button.focus {
color: $btn-default-color;
text-decoration: none;
}
My webpack config is
loaders.push({
test: /\.styl$/
include: sourceDir, // << even though I have this so as not to apply
// on files from 'node_modules', but it only works in webpack
// context, i.e. .js files, not in .styl files (apparently)
loader: extract.extract({
loader: `css-loader?importLoaders=3!postcss-loader!namespace-css-module-loader!stylus-loader`,
fallbackLoader: 'style-loader'
}),
});