Почему webpack переименовывает классы scss?

Question

[xster]

Добрый день! Подскажите пожалуйста почему вебпак переименовывает классы scss??
На данный момент в бандле все классы переименованы на .style-scss.
Что-то не могу найти где проблема.
Конфиг вебпака

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

Comments

[sim3x]

Покажите вход
Покажите, что на выходе

[xster]

sim3x,

// style.scss
.header {
  padding: 3px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px,
              rgba(0, 0, 0, 0.23) 0px 3px 10px;
  h1 {
    margin: 0;
    text-align: center;
  }

}

// app.css

.style-scss {
  padding: 3px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px; }
  .style-scss h1 {
    margin: 0;
    text-align: center; }
...

Answer 1

[ne0n]

Потому, что для loader: 'css-loader' установлено modules: true?

Comments

[xster]

Точно, спасибо)