Css-loader: @import css as global to prevent hash class name generation

[aegyed91]

If i import bootstrap from node_modules it implicitly gets random class names. How can i prevent this?

@import "bootstrap/dist/css/bootstrap.css";

body .navbar___1eyp7 {
  position: relative;
  padding: .5rem 1rem;
}

loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]!postcss'

....

postcss: (bundler) => {
  return [
    require('stylelint')(),
    require('postcss-import')({ addDependencyTo: bundler }),
    require('precss')(),
    require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
    require('postcss-reporter')({ clearMessages: true })
  ];
}

[markdalgleish]

Bootstrap relies on global selectors, so you're naturally going to find integration with CSS Modules somewhat awkward.

You might want to use separate loaders for CSS Modules and legacy global CSS like Bootstrap, i.e. name all of your scoped CSS like this: SomeComponent.local.css. I know of at least one company doing this already.

[aegyed91]

@markdalgleish ahaa, thanks for the tip!

Yeah a bit it is. I want to start my next project with postcss and css modules and also i recently switched to webpack (still working on it tho) so yeah, a lot of strange stuff annoys me, but this one got solved.

EDIT: just for the folks whom aren't that good with regex and don't want to suffer until you get it right.

{
  test: /^((?!\.local).)*\.css$/,
  include: _config.SRC_DIR,
  loader: isDevelopment
    ? 'style!css?sourceMap!postcss'
    : ExtractTextPlugin.extract('style', 'css?sourceMap&minimize!postcss')
},
{
  test: /\.local.css$/,
  include: _config.SRC_DIR,
  loader: isDevelopment
    ? 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]!postcss'
    : ExtractTextPlugin.extract('style', 'css?sourceMap&modules&minimize&importLoaders=1!postcss')
}

The first rule is a regular css-loader that matches all files that ends with .css and not contain .local.