Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

watch and compile sass without js import using webpack

Tags:

sass

webpack

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?

like image 433
Nitzan Avatar asked Jun 12 '18 11:06

Nitzan


1 Answers

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

like image 129
madebydavid Avatar answered Sep 21 '22 12:09

madebydavid



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!