Estoy usando webpack y al compilar los archivos sass las clases se modifican así
.margen-arriba-grande___-OnzA {
margin-top: 5rem;
}
.margen-arriba-mediano___3OWjZ {
margin-top: 3rem;
}
pero las clases originales tendrían que ser así
.margen-arriba-grande {
margin-top: 5rem; }
.margen-arriba-mediano {
margin-top: 3rem;
}
y esta es mi configuración de webpack, alguien sabe como podría solucionarlo?
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ['babel-polyfill','./src/js/index.js'],
output : {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: './src/index.html'
}),
new MiniCssExtractPlugin()
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.s?css$/,
use: [{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[local]___[hash:base64:5]"
}
},
"sass-loader"
]
}
]
}
}