1

Using vue 2.6.8

I am trying to import a css file into a component.

This is what I have tried, but it is not working.

In main.js just beneath the other imports I added,

require('@/assets/css/agency.css')

In the component,

<style scoped src="@/assets/css/agency.css">
</style>

That is how it is suggested here How to include css files in Vue 2

but I can't get it to work. I get the error

.src/assets/css/agency.css
error: Module not found

I also tried,

<style>
@import './assets/css/agency.css';
</style>

And I tried putting this in main.js,

import './assets/css/agency.css'

Which also does not work.

Been looking at Vue forum too,

https://forum.vuejs.org/t/how-to-import-css-file/14907

Any help would be greatly appreciated.

Thanks,

Shane G
  • 3,129
  • 10
  • 43
  • 85

2 Answers2

0

In my applications with Vue.js, the first .vue component that is loaded, I put the imports there in <style>.

For example: In an application I'm developing, I put the external .css files in the App.vue, as this is the first component to be loaded and I removed the scoped from <style>. In this way, the entire application was able to use the styles.

As for the path of the file, they are in the same hierarchical line, so it is optional to put the ./ or just start the assets/

In App.vue:

<style>
    @import 'assets/css/css/example.css';
    @import 'assets/css/style.css';
</style>

I hope contributed. Good luck.

fsenaweb
  • 24
  • 2
0

For me worked to add the css-file at main.js. -> But without the asserts

import "./style/myStyle.css"

Additionally I found out that the css files are listed at Dev-Console at browser at sources>Webpack-internal>.>src

enter image description here

MichiBack
  • 1,310
  • 13
  • 12