Como pré-compilar scss para um único arquivo css no webpack? - css, reactjs, sass, webpack, carregador de estilo webpack

Usando Reagir com o Webpack. Corri através de alguns artigos, mas a maioria deles sugere chamar arquivo scss individual para cada componente. Mas eu gostaria de pré-compilar todos os css em um único arquivo para todo o aplicativo, como fazemos usando grunhido / gulp.

Respostas:

Você pode usar o webpack-text-extract-pluggin que é responsável pela compilação de todos os arquivos css e agrupá-los em um index.css Arquivo.

Observe também que você precisará instalar sass-loader também para compilar o scss.

Na configuração do webpack:

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

Em index.html:

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

Em qualquer arquivo Javascript que passar pelo webpack:

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

Você poderia dar uma olhada no extrair-texto-webpack-plugin.

Depois de exigir isso em seu webpack.config.js:

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

Você pode reescrever seu carregador sass para isso:

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

Para mais opções e uso, verifique o link acima.