I have this webpack config that I'm using to process and lint my js and scss.
var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var StyleLintPlugin = require('stylelint-webpack-plugin');
var PostCssLoader = require('postcss-loader');
var sassLoaders = [
'css-loader',
'postcss-loader',
'sass-loader'
]
module.exports = {
devtool: 'cheap-source-map',
entry: {
global: "./src"
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
module: {
rules: [
{
test: /\.js/,
loaders: ['babel-loader', 'eslint-loader'],
exclude: /node_modules/
},
{
test: /\.scss/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: sassLoaders.join('!')})
}
]
},
plugins: [
new ExtractTextPlugin("[name].css"),
new CommonsChunkPlugin({
filename: "common.js",
name: "global"
}),
new StyleLintPlugin({
context: "src",
configFile: '.stylelintrc',
files: '**/*.scss',
failOnError: false,
quiet: false,
syntax: 'scss'
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: []
}
})
],
resolve: {
modules: [ path.join(__dirname, './src') ],
extensions: ['.js', '.scss', '.css']
}
}
In my src folder I have an index.js and a styles.scss.
Running webpack
properly lints my index.js and styles.scss files. However, running webpack --watch
only re-lints when I change my js file. It does not seem to be watching my styles.scss file for updates.
Is there anything I need to be doing to make the webpack watch work properly with the scss files as well?