Webpack configuration for Sass only

2 minutes to read

Initialize Node.js project.

Create a project folder and initialize a project with the following command:

$ mkdir sass-webpack-project
$ cd sass-webpack-project
$ yarn init -y

You can change a folder's name to any name as you want.
You will have an auto generated package.json file in the current working directory.

Add required packages to the project.

$ yarn add --dev \
  sass \
  sass-loader \
  webpack \
  webpack-cli \
  css-loader \
  mini-css-extract-plugin \
  webpack-remove-empty-scripts

NOTE If you use Yarn Workspaces, you can install npm packages with yarn workspace your-package-name add --dev space-separated-value-of-npm-packages, e.g.

$ yarn workspace your-package-name add --dev \
  sass \
  sass-loader \
  webpack \
  webpack-cli \
  css-loader \
  mini-css-extract-plugin \
  webpack-remove-empty-scripts

We use sass package in this example because node-sass has been deprecated.

Create Webpack configuration file.

Create webpack.config.js at the same level as package.json
Please note that we use Webpack version 5 configuration.
Add the following code to webpack.config.js:

// This Webpack is only for building Sass (*.scss) to CSS.
const path = require('path');
// This plugin extracts CSS into separate files.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// This plugin removes an output JavaScript file generated by Webpack.
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
// input file: src/scss/style.scss
// output file: wwwroot/styles/style.css
module.exports = {
  entry: {
    style: './src/scss/style',
  },
  // Explicitly set the default mode to development.
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'wwwroot/styles'), // An output dir must be an absolute path.
  },
  resolve: {
    extensions: ['.scss']
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // Extract code to an external CSS file.
          MiniCssExtractPlugin.loader,
          // Translates CSS to CommonJS and ignore solving URL of images
          {
            loader: 'css-loader',
            options: {
              // Set to false, css-loader will not parse any paths specified in url or image-set.
              // For more details, please refer to https://webpack.js.org/loaders/css-loader/#url.
              url: false
            }
          },
          // Compile Sass to CSS.
          'sass-loader',
        ],
        exclude: /node_modules/,
      },
    ] // End rules
  },
  plugins: [
    new RemoveEmptyScriptsPlugin({ verbose: true }),
    new MiniCssExtractPlugin({
      // Configure the output of CSS.
      // It is relative to an output dir. !!! Only relative path works, absolute path does not work.
      filename: '[name].css',
    }),
  ],
};

You can change an entry point and an output folder to match your environment.
In this example, our entry point file is src/scss/style.scss and output file is wwwroot/styles/style.css.
To simplify our example, please add an empty style.css in src/scss folder. You can add CSS property and value later.
This configuration uses RemoveEmptyScriptsPlugin to remove an unnecessary output JavaScript file.

Build with Webpack.

Add a custom script to package.json.

  "scripts": {
    "dev": "webpack",
    "build": "webpack --mode=production",
    "watch": "webpack --watch"
  },

Before building the project, please make sure you have *.scss file in src/scss folder which is configured as an entry point file.
Build the project with the following command.

$ yarn dev

NOTE If you use Yarn Workspaces, you can build your package with yarn workspace your-package-name dev.

Check your output CSS file.

You will find your output *.css file in an output folder that you specify in webpack.config.js.
For our example, the output file is in wwwroot/styles folder.

Our project structure

$ tree -I 'node_modules' sass-webpack-project
sass-webpack-project/
├── package.json
├── src
│   └── scss
│       └── style.scss
├── webpack.config.js
├── wwwroot
│   └── styles
│       └── style.css
└── yarn.lock

For the example code of this article, you can checkout from source code via Github.

Other related starter examples

Sass starter - Using Sass only without Webpack
Webpack v4 starter with JS - Using Sass and JS, config Webpack v4
Webpack v5 starter with JS - Using Sass and JS, config Webpack v4

Loading comments...