moebius/ ├── src/ │ ├── assets/ │ │ ├── scss │ │ │ ├── abstracts │ │ │ ├── base │ │ │ ├── components │ │ │ ├── layout │ │ │ ├── pages │ │ │ └── main.scss │ └── main.ts └── index.html
Moebius relies on the powerful Sass features and a modular structure, letting you handle complex styles in a breeze. You need to import all the SCSS partials into your core file. This is how scss files are organized. Partial SCSS file names always start with an underscore like this:
_button.scss . They act as chunks of code that you can import only if you need them. Of course some of them are mandatory for the project to work. Moebius is a UI kit in wich each SCSS file serves a different purpose:
- abstracts: holds all files related to SCSS variables, mixins, default global styles and other typography settings.
- components: holds all files related to Moebius Components. Each component has its own file.
- layout: holds all basic and mandatory layout files. The project will break if you ommit one of those files.
- pages: holds all the specific styles for each demo or group of demos.
Import Scss in Vue3
In order to load stylesheets into our application, we simply need to import
scss files in the
// file: ./src/main.ts // ... import '@fortawesome/fontawesome-free/scss/fontawesome.scss' import '@fortawesome/fontawesome-free/scss/regular.scss' import '@fortawesome/fontawesome-free/scss/solid.scss' import '@fortawesome/fontawesome-free/scss/brands.scss' import 'lightgallery.js/dist/css/lightgallery.css' import 'vue-toastification/dist/index.css' import '/@src/assets/scss/main.scss' // ...
All imported files here are to be converted in
css, optimized using
postcss, and injected automatically in
index.html at build and run time.
Bulma is fully integrated with Moebius. This means that when you change the
$primary Moebius color variable and any Bulma related variable to take precedence over it. The variable changes you make will be applied to all native Bulma elements.
Native Dark Mode
Moebius comes with a native Dark mode. This means that all components are prestyled for dark mode. You don't have to worry about it, when you turn it on, the colors change seamlessly. Dark mode styling is made through a global
.is-dark class added to the page
<body> element. Dark mode styling is centralized into a single file,
Lazyloading Scss Pages
moebius/ ├── src/ │ ├── assets/ │ │ ├── scss/ │ │ │ ├── pages/ │ │ │ │ ├── _landing.scss │ │ │ │ ├── _login.scss │ │ │ │ └── _wizard.scss │ │ │ └── main.scss
The pages folder holds the template pages that are not required by the main chat application.
They are not added by default to
main.scss, instead we lazyload them in layouts:
<!-- file ./src/layouts/WizardLayout.vue --> <script lang="ts"> // ... </script> <template> <!-- ... --> </template> <style lang="scss"> /* files imported in components will be loaded only once they are needed */ @import '../assets/scss/pages/wizard'; </style>