Webpack configuration for Sass only
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 becausenode-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 iswwwroot/styles/style.css
. - To simplify our example, please add an empty
style.css
insrc/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 inwebpack.config.js
. - For our example, the output file is in
wwwroot/styles
folder.
Our project structure
$ tree -I 'node_modules' sass-webpack-projectsass-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