0

Uso múltiples loaders para los estilos, como sass-loader, style-loader, less-loader, postcss-loader, css-loader para compilar estilos .scss y la consola me da este error:

ERROR in ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader/dist!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    CssSyntaxError

    (1:1) Unknown word

    > 1 | var content = require("!!../../node_modules/postcss-loader/src/index.js!../../node_modules/sass-loader/dist/cjs.js!./main.scss");
        | ^
      2 | 
      3 | if (typeof content === 'string') {

La configuración de mi archivo webpack.config.prod.js es este:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(le|sc|sa|c)ss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCss.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                    'style-loader',
                    'postcss-loader',
                    'sass-loader',
                    'less-loader'
                ],

            }
        ]
    }
}

1 respuesta 1

1

Crea reglas separadas para cada fichero que tiene que ser procesado por loaders independientes (esto en caso de que estés trabajando con ficheros css, sass y less en tu proyecto a la vez, si solo usas ficheros sass añade solo una de las reglas):

rules: [
    {
        test: /\.css$/,
        use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
    },
    {
        test: /\.s(c|a)ss$/,
        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
    },
    {
        test: /\.less$/,
        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ]
    }
]

Ten en cuenta siempre que los loaders se leen en orden inverso, por lo que si vas a utilizar css-loader y style-loader juntos, debes poner style-loader primero y css-loader después.

Y si estás usando MiniCssExtractPlugin, no es necesario que uses style-loader, ya que el primero es para extraer los estilos en ficheros externos y el segundo para inyectar los estilos en tu HTML final.

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.