SCSS dosyalarını ele almak için web paketine geçmek için, yardıma ihtiyacım var

Question

Scss dosyalarımı oluşturmak ve değiştirildikçe yeniden yüklemek için bir yontma görevi kullanıyorum.

Sadece WebPack yanına taşındı ve benzer bir ortam kurmaya çalıştığı ama gerçekten burada

benim yudum iştir ... onunla her yerde alamıyorum:

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()); 
}); 

ve bu ne kadar Yani Özetle, ben değişikliklere sıcak yeniden yükleme için benim küstahlık dosyalarını izlemek için WebPack kurmak ve genel dizinde bir style.css içine inşa etmek isteyen

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; 
     } 
    }) 
    ] 
}; 

zaman ... WebPack beraberim . o

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

yüklemez eğer

Answer 1

Oraya küstahlık yükleyici sahip güvenmesi, aksi takdirde Eğer yapılandırma

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