webpack 开发服务器忽略 scss 更改

Question

我设法用 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 有关。然后我又不知道如何解决。有什么提示或想法吗？

Answer 1

好的，我开始了。启动 webpack-dev-server 时，我只是问我们是否在生产环境中：

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

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

如果我们在生产中不，它会错过 ExtractTextPlugin。

最后部署我输入的更改：

NODE_ENV=production webpack -p

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

webpack 开发服务器忽略 scss 更改

webpack dev server ignoring scss changes

javascript

sass

node.js

webpack

webpack-dev-server