Reputation: 341
I have been using a gulp task to build my scss files and hot-reload them as they changed.
Just moved over to webpack and trying to set up a similar environment but I'm not really getting anywhere with it...
here is my gulp task:
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());
});
and this is how far I am with 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;
}
})
]
};
So in summary, I want to set up webpack to watch my sass files for changes, hot-reload, and build them into a style.css in a public directory.
Upvotes: 2
Views: 1572
Reputation: 3039
I trust that you have sass-loader in there, else it won't work, if not install it
npm install sass-loader node-sass webpack --save-dev
You should have something like this in your config
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
Upvotes: 3