bootstrap-stylus icon indicating copy to clipboard operation
bootstrap-stylus copied to clipboard

Webpack's CSS Module and PostCSS loaders underisbly applied on Bootstrap as well

Open laggingreflex opened this issue 7 years ago • 0 comments

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'
    }),
  });

laggingreflex avatar Jan 06 '17 08:01 laggingreflex