0

estoy configurando webpack por primera vez y quiero incluir sass , por ende ya instale todos los loaders , la pregunta seria puedo unificar los "test" y los "use" o tengo que colocarlos por separado o sea uno para cada uno(uno para css , uno para ,sass, uno para style)?

{ test: /.svg$/, use: ['@svgr/webpack'], },

        {
            test: /\.css$/i,
            use: [
                'style-loader',
                'css-loader'
            ],
        },

        {
            test: /\.css$/i,
            use: [
                MiniCssExtractPlugin.loader, 
                'css-loader'
            ],
        },

        {
            test: /\.s[ac]ss$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'style-loader',
                'css-loader',
                'sass-loader',
            ],
        },

1 respuesta 1

1

Puedes definir todos los loaders en una misma regla. En función del resultado del patrón aplicará un loader u otro.

Los loaders se ejecutan de derecha-izquierda. Y la salida de un loader es la entrada del siguiente. Así es como funcionan los loaders en webpack.

Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See "Loader Features" for more information about loaders order.

Orden de ejecución.

sass-loader -> css-loader -> style-loader (añade el css generado al head en la etiqueta <style) -> MiniCssExtractPlugin.loader (extrae el css generado en un archivo separado).

{
    test: /\.s[ac]ss$/i,
    use: [
        MiniCssExtractPlugin.loader,
        'style-loader',
        'css-loader',
        'sass-loader',
    ],
},

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.