Using React with webpack. Ran through some articles, but most of them suggest calling individual scss file for each component. But I would like to precompile all css into single file for entire application like we do using grunt/gulp.
2 Answers
You can use the webpack-text-extract-pluggin that is in charge of compiling all css files and bundling them in an index.css file.
Also note that you'll need to install sass-loader too in order to compile the scss.
In the webpack config:
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')
}
]
}
}
In index.html:
<link rel="stylesheet" type="text/css" href="/index.css">
In any Javascript file that gets through webpack:
require("./styles/my-custom-file.scss");
answered Oct 19, 2016 at 8:18
Christopher Chiche
15.4k10 gold badges65 silver badges100 bronze badges
Comments
You could take a look at the extract-text-webpack-plugin.
After requiring this in your webpack.config.js:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
You can rewrite your sass loader to this:
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'sass')}
]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
For more options and usage check the link above.
1 Comment
scazzy
Thanks @erik-Martijn
