Need help with setting up sass-loader to compile SCSS into CSS and include it in an HTML file using express.js, alongside react-hot-loader.
Check out my configuration file below:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HTMLWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
const path = require('path');
module.exports = {
entry: ['react-hot-loader/patch',
'webpack-hot-middleware/client?path=http://localhost:3000/__what',
'webpack/hot/only-dev-server',
__dirname + '/app/index.js'],
context: __dirname,
module:{
loaders:[
{
test:/\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query:{
presets:["react","es2015","stage-2"],
plugins: ["react-hot-loader/babel"]
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({fallback:'style-loader' ,use:['css-loader','sass-loader']}),
include:path.resolve(__dirname, '/app/scss')
}
]
},
output:{
filename:'payload-min.js',
path: __dirname + '/build',
publicPath: __dirname + '/build'
},
plugins:[HTMLWebpackPluginConfig ,
new ExtractTextPlugin(__dirname + '/build/payload.css', {
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()]
};
Make sure to include this line in your index.js file:
require('css-loader!sass-loader!./scss/payload.scss');The ExtractTextPlugin might not work as expected, ensure it is correctly configured
To execute, run:
webpack -d or webpack
Your directory structure:
.
├── app
│ ├── actions
│ ...
│ └── scss
│ └── payload.scss
├── build
...