Am building a Laravel vue SPA, I need to know How to include local CSS files in a single vue component only?
2
-
Do you refer to scoped CSS? Ref:vue-loader.vuejs.org/guide/scoped-css.htmlwbdlc– wbdlc2018-12-18 14:02:39 +00:00Commented Dec 18, 2018 at 14:02
-
i used scoped css but it only works if i refresh the page and still affect other components loaded via vue routerDickson Godwin– Dickson Godwin2018-12-18 14:31:56 +00:00Commented Dec 18, 2018 at 14:31
Add a comment
|
2 Answers
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.
2 Comments
Micheal C Wallas
Don't be afraid to nest the import under a css selector as well, it works!
Kaustubh Bagwe
important point is extension should be .scss
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>
