How to use CSS in vue.js apps?

Question

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.

if your styling is so long for a single component, perhaps your component could be broken into smaller reusable components? — Dean
– Dean, Commented Dec 13, 2017 at 13:45
If you have a global list of styles like bootstrap or even anything general that you want to use in each component, then make it global and require it in your app.vue or your application entry point, otherwise if each component has it's own unique style, it makes sense to include it in it's own component, also what @Dean said is true — samayo
– samayo, Commented Dec 13, 2017 at 13:46
Okay I understand that. So is it okay for a website to have a hundred style blocks instead of a seperate css file? I think that's my biggest confusion because I've always had my styles in a seperate files for what I thought was for good reasons and clean code, and smaller html documents. — kinx
– kinx, Commented Dec 13, 2017 at 13:52

Jose Garrido · Accepted Answer · 2017-12-13 17:36:05Z

2

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.

answered Dec 13, 2017 at 17:36

Jose Garrido

7322 gold badges15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use CSS in vue.js apps?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related