從gulp切換到webpack來處理SCSS文件，需要幫助設置

Question

我一直在使用gulp任務來構建我的scss文件並在它們更改時熱更新它們。

剛搬了的WebPack並試圖建立一個類似的環境，但我真的不與它成氣候......

這是我的任務，一飲而盡：

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

我相信你在那裏有青菜，裝載機，否則將無法正常工作，如果不安裝它

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

你應該有這樣的事情在你的配置

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