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?

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.

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>