Styles
We use a combination of
scss
and css-modules
for our styles by adding the lang="scss"
and module
attributes to <style>
tag:<style lang="scss" module>
.link {
width: 10px;
}
</style>
If you want to use any global
css
here's what you need to do:- 1.Install the library you need:
npm run add normalize.css
- 2.
It will look something like so:
/**
* Global CSS
*/
css: [
'normalize.css/normalize.css'
],
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.We use
scss
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.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
.We have a preconfigured
~/scss
alias inside nuxt.config.ts
to import local files. You can use it inside Vue
components like so:<style lang="scss" module>
@import "~/scss/variables";
.component {
color: $imported-color-from-variables;
}
</style>
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, usenuxt.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 fromjs
So, this:
<style lang="scss" module>
.component { ... }
.input { ... }
</style>
Will became this:
this.$style = {
'component': '_3hLE8Zr42CA8Iz_38AM4TJ_0',
'input': 'VZZoxarQNkuSWSg1ftV1v_0'
}
Now you don't have to worry about naming your classes or binding them together with
Vue
. The future is now!When naming your
css
classes stick to camelCase
, as it would be easier to call it inside your Vue
component:<template>
<div>
<p class="$style.camelCase"></p>
<p class="$style['kebab-case']"></p>
</div>
</template>
<style lang="scss" module>
.camelCase { ... }
.kebab-case { ... }
</style>
Also, keep in mind that all nested classes will be flattened for
$style
access:<template>
<div>
<p class="$style.root"></p>
<p class="$style.child"></p>
</div>
</template>
<style lang="scss" module>
.root {
.child { ... }
}
</style>
Imagine that you have to use your
scss
variable in vue
. Sounds like a nightmare? No, that's not. Imaging exporting this variable:$grid-size: 15rem;
And use it like so:
<style lang="scss" module>
@import '~/scss/variables';
:export {
$var-grid-size: $grid-size;
}
</style>
It would be available as
this.$style['var-grid-size']
. It might be useful for dynamic colors, grids, blocks, and tables.After we have created all our styles they are processed by a post-processor. Why? Because it is easier to make optimizations on this step.
- 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.Last modified 4yr ago