CODEWITHSUNDEEP
laravel-5vuejs2vue-componentsingle-page-application
Dickson Godwin
Dickson Godwin

Reputation: 123

Include local CSS files in a single vue component

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

Upvotes: 5

Views: 9718

Answers (2)

Hosein
Hosein

Reputation: 438

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>

Upvotes: 1

Daniel
Daniel

Reputation: 35714

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.

Upvotes: 10

Related Questions