https://github.com/jhnns/modular-sass-example
An example project to demonstrate how to write modular Sass files
https://github.com/jhnns/modular-sass-example
Last synced: 3 months ago
JSON representation
An example project to demonstrate how to write modular Sass files
- Host: GitHub
- URL: https://github.com/jhnns/modular-sass-example
- Owner: jhnns
- License: mit
- Created: 2021-03-26T16:20:16.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-26T17:53:10.000Z (about 4 years ago)
- Last Synced: 2025-01-24T12:13:43.368Z (5 months ago)
- Language: SCSS
- Size: 66.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modular Sass Examples
Many real-world applications suffer from monolithic stylesheets. This is even more likely to happen when a CSS preprocessor is used, such as Sass or Less. This example project demonstrates a setup where styles are loaded per component while still using a central component library such as bootstrap.
The crucial part is that you need to separate you Sass imports into two types:
- Pure imports that only provide variables, mixins, functions but don't output any CSS
- Side-effect imports that will produce CSS when imported
**If you can, you should replace your `@import` rules with `@use` rules. See the official documentation about [Sass Modules](https://sass-lang.com/documentation/modules)**.
- `npm start` demonstrates the setup in development mode. CSS is embedded into JavaScript and hot module replacement (HMR) is activated which means that you can change the styles without reloading the website. This is especially useful when designing forms.
- `npm run build` creates a production build. Run `npm run serve` afterwards to view it in a browser. Observe the network tab for on-demand CSS files.