Answer the question
In order to leave comments, you need to log in
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
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question