从 gulp 切换到 webpack 来处理 SCSS 文件，需要帮助设置

Question

我一直在使用 gulp 任务来构建我的 scss 文件并在它们更改时热重载它们。

刚搬到 webpack 并尝试建立一个类似的环境，但我并没有真正做到...

这是我的 gulp 任务：

gulp.task('sass:watch', function() {
    gulp.src('./assets/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
        }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('app/public'))
    .pipe(browserSync.stream());
});

这就是我对 webpack 的了解...

var path    = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'sourcemap',
  entry: {},
  module: {
    loaders: [
       { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
       { test: /\.html$/, loader: 'raw' },
       { test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap' },
       { test: /\.css$/, loader: 'style!css' }
    ]
  },
  plugins: [
    // Injects bundles in your index.html instead of wiring all manually.
    // It also adds hash to all injected assets so we don't have problems
    // with cache purging during deployment.
    new HtmlWebpackPlugin({
      template: 'client/index.html',
      inject: 'body',
      hash: true
    }),

    // Automatically move all modules defined outside of application directory to vendor bundle.
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
      }
    })
  ]
};

总而言之，我想设置 webpack 来监视我的 sass 文件的更改、热重载，并将它们构建到公共目录中的 style.css 中。

Answer 1

我相信你那里有 sass-loader，否则它不会工作，如果不安装它

npm install sass-loader node-sass webpack --save-dev

你的配置中应该有这样的东西

loaders: [
  {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  }
]