CODEWITHSUNDEEP
javascriptbuildsasswebpack
Robert Crous
Robert Crous

Reputation: 341

Switching to webpack from gulp to handle SCSS files, need help setting up

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: 1573

Answers (1)

highFlyingSmurfs
highFlyingSmurfs

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

Related Questions