Include local CSS files in a single vue component

Question

Am building a Laravel vue SPA, I need to know How to include local CSS files in a single vue component only?

Voss

Do you refer to scoped CSS? Ref:vue-loader.vuejs.org/guide/scoped-css.html – Longshore

i used scoped css but it only works if i refresh the page and still affect other components loaded via vue router – Voss

Answer 1

You can use the @import available through scss like so:

<style lang="scss" scoped>
  @import '../css/mycss.scss'; /* injected */
  @import '../css/mycss.css'; /* will use url import (do not use)*/
</style>

This may require that you add node-sass dependency and make some adjustments to your webpack configuration, if you don't already have it. If you're using a Vue cli generated project though, it is likely already included.

Note that if you want the css to be scoped, you should rename the extension to .scss, this way it will be handled by vue-loader. Importing a .css file is does not work the same way, and is treated as a url import.

Grecism

Don't be afraid to nest the import under a css selector as well, it works! – Forge

important point is extension should be .scss – Erosion

Answer 2

You can import CSS file on component inside script tag

This worked for me:

<template>
</template>

<script>
import "@/assets/<file-name>.css";

export default {}
</script>

Listed