我有这个webpack配置,我用它来处理和lint我的js和scss。
$onChanges
在我的src文件夹中,我有一个index.js和一个styles.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']
}
}
lind my index.js和styles.scss文件。但是,当我更改我的js文件时,只运行webpack
重新提示。它似乎没有看我的styles.scss文件进行更新。
我是否还需要做些什么才能让webpack手表与scss文件一起正常工作?