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"]
  }
]

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

1 个答案: