-
Version
$ node -v
v16.13.1
$ npm -v
8.1.2
- Init
$ npm init - Dev dependency add
$ npm install --save-dev sass
- Add bootstrap dependency
$ npm install --save bootstrap
- Install fontawesome free
$ npm install --save @fortawesome/fontawesome-free
- Install postcss-cli
$ npm install postcss-cli autoprefixer - Create the following folders and files
$ mkdir scss
$ touch scss/style.scss
$ npm run compile:sass
> bootstrap-v5@1.0.0 compile:sass
> sass scss:assets/css- Now add the watch flag
"compile:sass": "sass --watch scss:assets/css"
- Add file
$ touch scss/_custom.scss
$ touch theming-kit.html -
You can open the content of theming-kit.html using
Live Server -
Create folders
$ mkdir -p scss/sections
$ mkdir -p scss/components
$ touch scss/components/_buttons.scss
$ touch scss/components/_animations.scss
$ touch scss/components/_mixins.scss
$ touch scss/components/_typography.scss
$ touch scss/sections/_navbar.scss
$ touch scss/sections/_intro-section.scss
$ touch scss/sections/_companies.scss
$ touch scss/sections/_services.scss
$ touch scss/sections/_testimonials.scss
$ touch scss/sections/_faq.scss
$ touch scss/sections/_portfolio.scss
$ touch scss/sections/_get-started.scss
$ touch scss/sections/_footer.scss