X
X
xster2017-11-25 17:21:12
css
xster, 2017-11-25 17:21:12

Why does webpack rename scss classes?

Good afternoon! Can you please tell me why webpack renames scss classes??
At the moment, all classes in the bundle have been renamed to .style-scss .
I can't find where the problem is.
webpack config

const webpackConfigDev = {
  devtool: 'inline-source-map',
  entry: {
    app: [
      'react-hot-loader/patch',
      path.resolve(__dirname, './app/client/assets/styles/style.scss'),
      path.resolve(__dirname, './app/client/index.js')
    ]
  },
  output: {
    path: path.join(__dirname, 'build/'),
    publicPath: 'build/',
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: 'eslint-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: path.join(__dirname, 'app'),
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react', 'stage-2']
        }
      },
      {
        test: /\.css/,
        use: [
          {
            loader: "style-loader"
          }, {
            loader: "css-loader", options: {
              sourceMap: true
            }
          }]

      },
      {
        test: /\.scss$/,
        use: ExtractCssChunks.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                // localIdentName: 'bundle.css'
                localIdentName: '[name].[ext]'
              }
            },
            {
              loader: 'sass-loader'
            }
          ]
        })
      },
      {
        test: /\.(gif|png|jpg|jpeg|svg)$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, './app/client/assets/'),
        use: 'url-loader?limit=10000&name=assets/[name]-[hash].[ext]'
      }
    ]
  },

  plugins: [
    new WriteFilePlugin(),
    new HtmlWebpackPlugin({
      favicon: 'favicon.ico'
    }),
    new ExtractCssChunks({
        filename: '[name].css',
      },
    ),

    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ],
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
ne0n, 2017-11-25
@xster

Because loader: 'css-loader' is set to modules: true?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question