私は、js と scss を処理して lint するために使用しているこの webpack 構成を持っています。
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']
}
}
私の src フォルダーには、index.js と styles.scss があります。
正しく実行webpack
すると、index.js ファイルと styles.scss ファイルがリントされます。ただし、webpack --watch
js ファイルを変更すると、再リントのみが実行されます。私の styles.scss ファイルの更新を監視していないようです。
webpack ウォッチが scss ファイルでも適切に動作するようにするために必要なことはありますか?