Webpack, Scss and HTML Minimal and Easy Setup For Every Developer

Hi, everyone.

I'll show now very easy way to setup scss, webpack in your HTML project. By this you can easily use scss in your HTML project without any hassle and make some real good maintainable CSS.

Init Npm project

npm init

Then generate a very basic npm scafolding. Like below file.

So, package.json file will be created, like below -

{
  "name": "fullstack-scss",
  "version": "0.0.1",
  "description": "Fullstack boilerplate with SCSS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [
    "scss",
    "fullstack",
    "course"
  ],
  "author": "akash <manirujjamakash@gmail.com>",
  "license": "GPL-2.0"
}

Install all necessary dev dependencies

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

The following libraries will be added by these command -

1. webpack
2. webpack-cli
3. css-loader
4. node-sass
5. sass
6. sass-loader
7. style-loader
8. mini-css-extract-plugin

package.json looks will be like this -

{
  "name": "fullstack-scss",
  "version": "0.0.1",
  "description": "Fullstack boilerplate with SCSS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "scss",
    "fullstack",
    "course"
  ],
  "author": "akash <manirujjamakash@gmail.com>",
  "license": "GPL-2.0",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}

Style and Index JS

Create a folder called src.

Then create two files inside that src folder -

1. index.js - This is the root entry file.
2. style.scss - This will be our main file which will be converted to css later.

Inside src/style.scss just add a basic scss style -

$font-size: 25px;
$bg-red: red;

body {
    font-size: $font-size;
    background: $bg-red;
}

.navbar {
    .btn {
        font-size: $font-size;
        padding: 10px;
    }

    ul {
        list-style: none;

        li {
            display: inline-block;
        }
    }
}

Inside src/index.js just import the scss -

import './style.scss';

Webpack Configuration

in webpack.config.json configure auto compilation css and js in dist folder -

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

module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/main.js',
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    MiniCssExtractPlugin.loader,

                    // Translates CSS into CommonJS
                    "css-loader",

                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/main.css',
        })
    ],
    watch: true
};

Add webpack also as package.json's script command -

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
},

So, finally package.json will be like this -

{
  "name": "fullstack-scss",
  "version": "0.0.1",
  "description": "Fullstack boilerplate with SCSS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "keywords": [
    "scss",
    "fullstack",
    "course"
  ],
  "author": "akash <manirujjamakash@gmail.com>",
  "license": "GPL-2.0",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}

Now runin command -

npm start

And look at dist/css/main.css -

/*!*********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss ***!
  \*********************************************************************************************************/
body {
  font-size: 25px;
  background: red;
}

.navbar .btn {
  font-size: 25px;
  padding: 10px;
}
.navbar ul {
  list-style: none;
}
.navbar ul li {
  display: inline-block;
}

So, you can use your generated css file in your HTML file - index.html -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scss Learning</title>
    <link rel="stylesheet" href="dist/css/main.css">
</head>

<body>
    <h2>Scss Learning</h2>
</body>

</html>

That's it, this is the very simple way to integrate webpack and scss in your HTML project.