webpack dev服务器忽略scss更改

时间:2016-07-28 00:38:44

标签: javascript node.js sass webpack webpack-dev-server


我设法使用webpack压缩/编译我的js和scss文件。 scss文件被'extract-text-webpack-plugin'提取到外部css文件中。这是代码:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
require('es6-promise').polyfill();

module.exports = {
  entry: ['./js/app'],
  output: {
   path: path.join(__dirname, 'js'),
   publicPath: 'js',
   filename: 'app.min.js'
  },
 plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compressor: {
     warnings: false,
    },
  }),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new ExtractTextPlugin("../css/styles.min.css", {allChunks: false})
 ],
 module: {
  loaders: [{
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
  }]
 }
}

当我现在运行“ webpack-dev-server js / app.js ”时 - 它会在js文件中获取我的更改(例如警告),但不会在css文件中注释更改

这是app.js:

var $ = require('jquery');
require('../css/styles.scss');

alert('Hi');

我猜这个问题与ExtractTextPlugin有关。然后我再也不知道如何解决方法。任何提示或想法?

1 个答案:

答案 0 :(得分:0)

好的,我明白了。在启动webpack-dev-server时,我只是问我们是否处于生产环境中:

const live = process.env.NODE_ENV === "production";

if(live) {
 ...
} else {
 ...
}

如果我们在制作中,它会错过ExtractTextPlugin。

最后,为了部署我的更改,我输入:

NODE_ENV=production webpack -p

也可以使用npm脚本来缩短它。