gulpからSCSSファイルを処理するwebpackに切り替えるには、ヘルプの設定が必要です

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

だから要約すると、私は変更のための私のSASSファイル、ホットリロードを見るためにWebPACKのを設定し、公開ディレクトリにあるstyle.cssにそれらを構築したいです。それ

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

をインストールしていない場合

Answer 1

私はあなたがそこにSASS-ローダーを持っていることを信頼し、そうでなければあなたは、あなたのコンフィグ

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