CODEWITHSUNDEEP
cssvue.jsvue-component
kinx
kinx

Reputation: 493

How to use CSS in vue.js apps?

I'm having trouble understanding how exactly I should build sites with CSS. I get that each component has it's own CSS, but should I do this with every component? What if the components are huge with a lot of CSS?

I've looked at some sites that were built with vue.js and they have external CSS files such as a app.css file with a ton of internal style blocks.

I'm use to building sites with Sass in it's own /styles directory and having compass.app compile those .scss files into .css files.

Here's an example of a component css block:

<style lang="scss">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
  a {
    color: red;
  }
}
</style>

What if that was a thousand+ lines? Would I move that into an external scss file and if so, how? How does this all work?

Thanks.

Upvotes: 0

Views: 960

Answers (1)

Jose Garrido
Jose Garrido

Reputation: 732

If you concern is about code separation you can have custom CSS code in a component and add a scoped attribute so the styles you are writing there would only apply to that component:

<style lang="scss" scoped>

    /* your scoped css rules here will only apply to this component */

</style>

Now if you also want to compile the CSS from all of your components and merge them into a single final CSS file that you would link from your main HTML file then you need to add a bundler/compiler such as webpack

You can also take a look at vue css-loader to understand how to modularize and compose your CSS rules.

Upvotes: 2

Related Questions