Styles
Last updated
Last updated
We use a combination of scss
and css-modules
for our styles by adding the lang="scss"
and module
attributes to <style>
tag:
We also enforce strong to keep it consistent and find possible errors early.
If you want to use any global css
here's what you need to do:
Install the library you need: npm run add normalize.css
Add the file path to css
property of
It will look something like so:
This file will be included in the final build.
Every layout in client/layouts/
is not scoped or bundled in a module. It is required to drop some global styles for all components that are using this layout.
scss
is a preprocessor. It means, that scss
get compiled to css
later. And before it is compiled scss
allows to use features that are missing from css3
spec, including:
That's the bare minimum you need to know to productively use scss
.
Things to keep in mind:
you don't have to specify a file extension or leading _
, this will be considered as a linting error
do not import modules that produce css
output, it will pollute your stylesheets with multiple declarations
do not import external css
libraries, use nuxt.config.ts
for that
The main idea is:
to rename your classes to some unique name during build time
to make your css
classes available from js
So, this:
Will became this:
Now you don't have to worry about naming your classes or binding them together with Vue
. The future is now!
Also, keep in mind that all nested classes will be flattened for $style
access:
Imagine that you have to use your scss
variable in vue
. Sounds like a nightmare? No, that's not. Imaging exporting this variable:
And use it like so:
It would be available as this.$style['var-grid-size']
. It might be useful for dynamic colors, grids, blocks, and tables.
to combine all @media
queries into one block for better performance
These optimizations are applied by webpack
. You don't have to run them manually.
We use to write components' styles. Because it is just like css
. But better! You can just drop-in any plain css
and it will work with no any other actions required.
We have a preconfigured ~/scss
alias inside to local files. You can use it inside Vue
components like so:
Every Vue
component should be a . How does it work?
When naming your css
classes stick to , as it would be easier to call it inside your Vue
component:
You can play around with if you would like to make them nested.
After we have created all our styles they are processed by a . Why? Because it is easier to make optimizations on this step.
It comes with nuxt
. What kind of custom optimizations or plugins do we use?
- which allows