Nyhetsbrev

Få artiklar, råd och tips om:

Du kan läsa mer om vår policy och vår hantering av persondata här.

CSS in Vue.js

Adding CSS to a Vue.js Project

by Frida Nyvall

The second part in a series of articles about working with CSS in Vue.js.

In this part of the series that started with ”Working with CSS in Vue.js”, focus is on different ways of adding CSS to a Vue.js project


Separate Global Style Files

If you prefer to keep your style files separate from the .vue files and their style tags, similar to a workflow without a framework, this can be achieved. Setting up the style files this way means the styling will be applied to your template sections, but not available in component style tags.

Note:

!

For example, if you create a SCSS variable in your style file, it will not be recognized if you try to use it within a component style tag. To get global styles available in component style tags, see the article about importing global styles in component style tags.


Set up your folder and file structure for your style files, for example src/styles/style.scss. If you use a structure with folders, _filename.scss and SCSS imports, this will work provided you have added SCSS support. (See the article ”Working with CSS in Vue.js” on adding SCSS support.)

In your main.js file, import your styles below the Vue import:

import './styles/style.scss'

Style Tags in Vue Files

The default version of handling CSS is to write your styles in the vue file style tags.

Styles written in this way are global. Styles defined here are available in the project’s other .vue files.

<style>
  /*…write your styles here*/
</style>

If you prefer organizing your (global) style files outside of .vue file style tags, have a look at the previous section.

Scoped Styletags

Scoping means adding data attributes to the different classes to keep them from leaking styles to one another. Scoping is similar to CSS Modules (read more about this in our article ”CSS Modules in Vue.js”).

Add “scoped” to the component style tag in the .vue file:

<style scoped>
  /*add scoped styles here*/
</style>

 

Style Cascading

If a child component has a class name that is shared by its parent component, the parent component style will cascade to the child. Read more about nesting with the deep selector in the documentation.

To target children of scoped parents, use:

.parent >>> child { /*styles*/ }

Which syntax works depends on which preprocessor is used. Possible syntaxes are also:

.parent /deep/ child{ /*styles*/ }

.parent ::v-deep child{ /*styles*/ }

Read more about this in the vue-loader documentation.

Setup info

i

The starting code for this article is created by the Vue CLI command tool version 3.3.0 and Vue.js version 2.6.10. Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

Articles in this series

Tags

Fler inlägg

img

Importing Style Files to Component Style Tags in Vue.js

img

CSS Modules in Vue.js

img

Working with CSS in Vue.js