
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 -
- webpack
- webpack-cli
- css-loader
- node-sass
- sass
- sass-loader
- style-loader
- 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 -
index.js
- This is the root entry file.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.
PHP If-else-elseif and Switch-case
PHP String Functions - All necessary String functions in PHP to manage strings better.
Popular Tutorials
Categories
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
8
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
CSS
2
-
Design Pattern in PHP
2
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
11
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
7
-
Python
1
-
React Js
19
-
React Native
1
-
Redux
2
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Bash Scripting
- Business
- C
- C-sharp programming
- C++
- Code Editor
- CSS
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development