A starter kit to use sass/scss in your HTML project and maintain a scalable code in your design.
Just clone the repo and run the following commands to start
git clone https://github.com/ManiruzzamanAkash/Sass-Starter-Template.git
npm install
npm startnpm initWe'll use webpack to make our setup:
Doc Link - https://webpack.js.org/loaders/sass-loader/
npm i webpack webpack-cli --save-devNow, install all necessay plugins to load sass, css and for the extract plugin.
npm install sass-loader style-loader css-loader postcss-loader sass mini-css-extract-plugin --save-devor, you can check the package.json
{
"name": "design",
"version": "1.0.0",
"description": "Sass Setup",
"main": "index.js",
"scripts": {
"start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.36.0",
"sass-loader": "^12.1.0",
"webpack": "^5.47.0",
"webpack-cli": "^4.7.2",
"css-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.1.0",
"node-sass": "^6.0.1",
"postcss-loader": "^6.1.1",
"style-loader": "^3.2.1"
}
}
src/scss/app.scss -
body {
background-color: red;
}src/index.js with this line -
import './scss/app.scss';webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src',
mode: 'development',
output: {
path: __dirname + "/dist",
filename: 'js/main.js'
},
module: {
rules: [
{
test: /\.js/,
exclude: /(node_modules|bower_components)/,
include: __dirname + '/src',
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
]
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'postcss-loader',
'sass-loader',
],
}
],
},
plugins: [
// Plugins that will make a css file after converting from scss and extract to location
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].min.css",
ignoreOrder: false
})
],
watch: true, // Make running codes
};npm startAnd now in your design folder, you can put your HTML code and add the auto-generated CSS, like so,
design/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>Welcome Scss</title>
<link rel="stylesheet" href="../dist/css/main.css">
</head>
<body>
<div class="header">
<h2>Header Part</h2>
</div>
<div class="content">
<h2>Content Part</h2>
<div class="home-page">
<h3>Home Page</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam reiciendis sit consequatur accusantium repudiandae sequi, rem cupiditate necessitatibus. Molestiae nisi facere iusto et repellendus cumque reprehenderit, modi recusandae tempora. Facilis?</p>
</div>
</div>
<div class="footer">
<h2>Footer Part</h2>
</div>
</body>
</html>Open this index.html in browser. And hope, you can get a red background color template.
Inside src/scss/layouts folder -
content.scss
.content {
background-color: greenyellow;
}header.scss
.header {
background-color: blueviolet;
}footer.scss
.footer {
background-color: blueviolet;
}Inside src/scss/pages folder -
home.scss
.home-page {
background: hotpink;
h3 {
font-size: 100px;
}
}Now in app.scss -
@import './layouts/header.scss';
@import './layouts/footer.scss';
@import './layouts/content.scss';
@import './pages/home.scss';That's all. Now check, auto generated css stored in dist/css/main.css and that's very clean.
/*!******************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/app.scss ***!
\******************************************************************************************************************************************************/
.header {
background-color: blueviolet;
}
.footer {
background-color: blueviolet;
}
.content {
background-color: greenyellow;
}
.home-page {
background: hotpink;
}
.home-page h3 {
font-size: 100px;
}Open the index.html again in browser. And hope, you can get a dummy-template with integrated CSS.
Yes, you can add some demo HTML page with scss designed. Just create Pull-Request and you'll be a contributor of us.