Skip to content

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

@laggingreflex

Description

@laggingreflex

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions