How to configure and install WebPack and setup a SASS/SCSS transpiler

MiladRx — Tue, 10 Oct 2023 04:25:08 +0000

Lets start out with writing sass --save-dev in the Terminal

npm install sass --save-dev

When you run npm install sass --save-dev, you are installing the SASS package as a development dependency. Development dependencies are packages that are only needed during the development process and don't affect the application's functionality in a production

to automatically set up the required folders and files in your project, you can run the following commands in your terminal:

mkdir src
mkdir src/scss
mkdir dist
mkdir dist/css
type nul > src/scss/_main.scss
type nul > src/style.scss

These commands are commonly used when setting up a project structure and initializing the necessary directories and files for development.

Install the necessary dependencies by running the following commands:

npm install webpack webpack-cli sass-loader style-loader npm i mini-css-extract-plugin css-loader --save-dev

Now, let's set up the SASS/SCSS transpiler with watch. Open your package.json file.

Update the scripts section to include the following:

"scripts": {
    "build": "webpack"
  }

This script uses the node-sass package to watch the src/scss directory for changes and transpile the SASS/SCSS files to CSS, which are then outputted to the dist/css directory.

now lets integrate the SASS/SCSS transpilation into a Webpack configuration.

Create a webpack.config.js file in the root of your project directory.

Open the webpack.config.js file and add the following configuration:

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

module.exports = {
  plugins: [ new MiniCssExtractPlugin() ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  devtool: 'source-map',
};

Make sure your SASS/SCSS files are imported in your entry file (src/index.js in this example).

Make sure you add the following code

Now, you can run the following command to start both the SASS/SCSS transpiler and Webpack:

npm run build

DEV Community: MiladRx

How to configure and install WebPack and setup a SASS/SCSS transpiler