watch and compile sass without js import using webpack

Question

Was wondering if there is any way to watch multiple scss files and compile them to one css file without having to import the scss file inside the js file?

Answer 1

You can configure the webpack entry point to be a SCSS file by itself and then you do not have to have any imports within JavaScript.

A very simple webpack config, such as below should work:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './scss/app.scss',
  module: {
    rules: [
      // Extracts the compiled CSS from the SASS files defined in the entry
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          [
            'css-loader',
            'sass-loader'
          ]
        ),
      }
    ],
  },
  plugins: [
    // Where the compiled SASS is saved to
    new ExtractTextPlugin({
      filename: 'app.css',
      allChunks: true,
    })
  ],
  devServer: {
    host: '0.0.0.0',
  }
};

This setup will watch the SCSS files for changes and you can reload the page manually to see the changes.

I put together a small example project to demonstrate: https://github.com/madebydavid/watch-and-compile-scss