Is there a webpack loader / NPM script that compiles solely my SCSS files, similar to how Gulp works?

Question

I've been using Webpack and have found it great for bundling, polyfilling and all sorts of other functions for Javascript, however I wondered if there was a known loader / NPM script that automatically compiles designated .scss files into one.

I have previously used the sass-loader, extract-css plugin to take SCSS out of components and bundle them into the final dist file which is fine for web apps. However, a lot of my day to day work is spent working on traditional websites, so it's often not generated via components / modules.

What I'm looking for, is anytime I save an .scss file, if this is included within my entry points / rules, it automatically compiles all .scss files into a dist/styles.css sheet.

I've had a look online and Gulp seems to offer this, but it looks like Webpack already does 90% of what Gulp offers so ideally would want to keep this all in Webpack.

Thanks in advance

Old_dream Old_dream · Accepted Answer · 2021-01-22T14:19:35

import the scss file on your entry point like this import './style.scss';.

Install mini-css-extract-plugin.

Then add this to your webpack config


const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module: {
        rules: [
            {
                test: /\.(sc|c)ss$/,
                use: [
                    // { loader: 'style-loader' },
                    {
                        loader: MiniCssExtractPlugin.loader, // extract css to a single file
                        options: {
                            publicPath: '../',
                            hmr: false
                        }
                    },
                    {
                        loader: 'css-loader', options: {
                            sourceMap: false
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: false,
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader', options: { sourceMap: false }
                    }
                ],
                exclude: /node_modules/
            }
        ],
    },

Is there a webpack loader / NPM script that compiles solely my SCSS files, similar to how Gulp works?

1 Answers