style - ¿Cómo precompilar scss a un único archivo css en el paquete web?

selectores css

Question

Usando React con webpack. Recorrió algunos artículos, pero la mayoría de ellos sugiere llamar al archivo scss individual para cada componente. Pero me gustaría precompilar todos los css en un solo archivo para toda la aplicación, como hacemos con grunt / gulp.

Answer 1

Puedes echar un vistazo al paquete extract-text-webpack-plugin .

Después de requerir esto en su webpack.config.js:

var ExtractTextPlugin = require("extract-text-webpack-plugin");

Puedes reescribir tu cargador sass para esto:

module: {
    loaders: [
        {test: //.js$/, exclude: /node_modules/, loader: ''babel-loader''},
        {test: //.scss$/, loader: ExtractTextPlugin.extract(''style'', ''css'', ''sass'')}
    ]
},
plugins: [
    new ExtractTextPlugin(''bundle.css'')
]

Para obtener más opciones y uso, consulte el enlace de arriba.

Answer 2

Puede usar el paquete webpack-text-extract-pluggin que se encarga de compilar todos los archivos css y agruparlos en un archivo index.css .

También tenga en cuenta que necesitará instalar sass-loader también para compilar el scss.

En la configuración del paquete web:

var ExtractTextPlugin = require(''extract-text-webpack-plugin'');
config = {
    ..., 
    plugins: [
        ...,
        new ExtractTextPlugin(''index.css'')
    ],
    module: {
        loaders: [
            ...
            {
                test: //.css$/,
                loader: ExtractTextPlugin.extract(''style'',''css'')
            },
            {
                test: //.scss$/,
                loader: ExtractTextPlugin.extract(''style'', ''css!sass'')
            }
        ]
    }
}

En index.html:

<link rel="stylesheet" type="text/css" href="/index.css">

En cualquier archivo Javascript que se obtiene a través del paquete web:

require("./styles/my-custom-file.scss");