Compiled Sass has weird changed class names Webpack 2 ExtractTextPlugin

Question

So I have this code below in my webpack 2 config. It seems to work other than it is altering my css class names.

modules:

test: [/\.scss$/, /\.sass$/],
loader: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        importLoaders: 1
      }
    },
    {
      loader: 'sass-loader'
    },
  ],
}),

plugins:

new ExtractTextPlugin({
  filename: 'global.css',
  allChunks: true,
}),

CSS Outputted in global.css:

._346v3lRS9p5yMQOIqOJas_ {
  max-width: 100%;
  height: auto; }

._3jLdPG7qJYZI8jVfnpr2sy {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.15rem;
  transition: all 0.2s ease-in-out;
  max-width: 100%;
  height: auto; }

._28w9sGKbZxXO8saGymF0cf {
  display: inline-block; }

What is going on that causes that?

Something to note is I figured out if I change the modules ExtractTextPlugin to look like so it doesn't do this with the css class names and looks fine:

{
  test: [/\.scss$/, /\.sass$/],
  loader: ExtractTextPlugin.extract({
    fallbackLoader: 'style-loader',
    loader: `css-loader?moudules=true&!postcss-loader?importLoaders=1!sass-loader?`,
  }),
},

So I am really curious what is going on?

score 1 · Answer 1 · answered Jun 28 '17 at 22:14

{
  test: [/\.scss$/, /\.sass$/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2,
        }
      },
      {
        loader: 'postcss-loader',
        options: {
        }
      },
      {
        loader: 'sass-loader'
      },
    ],
  }),
},

Fix was changing the code to above. The big one was removing the modules from css-loader.

score 0 · Answer 2 · answered Jul 15 '17 at 10:35

This is controlled via the "localIdentName" property of "css-loader". By default it parses your class names to that structure. You can override it by using something like:

{
      loader: 'css-loader',
      options: {
        localIdentName: '[name]--[hash:base64:5]',
        modules: true
      }
    }

Compiled Sass has weird changed class names Webpack 2 ExtractTextPlugin

2 Answers2