I'm trying to make webpack to compile and serve scss files. Unfortunately whatever I do and change *.scss files are not parsed. The only thing which is done by webpack is generating a bundle.js file which serves all js content. I'm not really sure what's wrong witch this configuration.
let path = require("path");
let webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin("styles.css");
module.exports = {
devtool: 'inline-source-map',
entry: [
'./src/index.js',
],
resolve: {
modules: [
"src",
'node_modules'
],
extensions: ['.js', '.jsx', '.scss']
},
output: {
path: path.resolve(__dirname, "build"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'react-hot-loader',
'babel-loader?presets[]=react,presets[]=es2015',
]
},
{
test: /\.scss$/,
include: path.join(__dirname, 'app', 'scss'),
use: extractCSS.extract({
fallback: 'style-loader',
use: [
'css-loader',
'sass-loader?outputStyle=expanded'
]
})
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
extractCSS
],
};
With following source tree:
ROOT
/build
/src
/scss
index.js
webpack.config.js
packages.json
Your .scss files have to be somehow accessible trough an entrypoint, either by being imported/required in index.js
or (better yet) in a separate file like index.scss
.