Muallif: Jasur Haydarov (jasurhaydarovcode)
npm i scss-modsmv node_modules/scss-mods/scss* .
yarn add scss-modsmv node_modules/scss-mods/scss* .project-folder/
│
├── index.html
├── scss/
│ ├── main.scss
│ ├── _variables.scss
│ ├── _mixins.scss
│ ├── _base.scss
│ ├── components/
│ │ ├── _header.scss
│ │ ├── _footer.scss
│ │ ├── _navbar.scss
│ │ ├── _button.scss
│ │ └── _card.scss
│ ├── layout/
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _footer.scss
│ │ ├── _sidebar.scss
│ │ └── _main.scss
│ ├── pages/
│ │ ├── _home.scss
│ │ ├── _about.scss
│ │ ├── _contact.scss
│ │ └── _product.scss
│ └── utils/
│ ├── _functions.scss
│ ├── _mixins.scss
│ └── _variables.scss
└── css/
└── main.css
npm init -ymkdir scss
mkdir cssnpm install sassagarda dev dependeses ga o'rnatmoqchi bo'lsangiz
npm install sass --save-devpackage.json faylingizda scripts bo'limiga quyidagi skriptni qo'shing:
"scripts": {
"sass": "sass --watch scss:css"
}Bu skript .scss faylini .css fayliga avtomatik kompilyatsiya qilish uchun ishlatiladi.
npm run sassBu buyruq scss faylini kuzatadi va har bir o'zgarishdan so'ng css.css faylini yangilaydi.
index.html faylingizda kompilyatsiya qilingan CSS faylini ulash uchun quyidagi qatorni <head> tegiga qo'shing:
<link rel="stylesheet" href="css/main.css">{
"name": "project-folder",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"sass": "sass --watch scss:css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.32.8"
}
}Mana shu qo'llanma yordamida loyihangizda SCSS dan foydalanishni boshlashingiz mumkin. Agar qo'shimcha yordam kerak bo'lsa, issuedan bemalol so'rang!