0

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"
            ]
        }
    ]
}
}

1 respuesta 1

0

Has intentado setear la opción modules a false en el css-loader? Seteándola a false no debería añadirte nada en los selectores de clase:

options: {
  *******
  modules: false,
  *******
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.