Vue2导入CSS文件

时间:2019-06-22 10:58:33

标签: css file vuejs2

使用vue 2.6.8

我正在尝试将CS​​S文件导入组件。

这是我尝试过的方法,但是不起作用。

在main.js中,在我添加的其他导入下方,

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

在组件中,

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

这是这里的建议How to include css files in Vue 2

但是我无法正常工作。我得到了错误

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

我也尝试过

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

然后我尝试将其放入main.js中,

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

这也不起作用。

也看过Vue论坛

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

任何帮助将不胜感激。

谢谢

2 个答案:

答案 0 :(得分:1)

在使用第一个加载的.vue组件Vue.js的应用程序中,我将导入文件放在了<style>中。

例如: 在我正在开发的应用程序中,我将外部.css文件放入App.vue中,因为这是要加载的第一个组件,并且我从scoped中删除了<style>。这样,整个应用程序就可以使用样式。

关于文件的路径,它们位于同一层次结构行中,因此可以选择放置./或仅启动assets/

在App.vue中:

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

我希望能有所贡献。祝你好运。

答案 1 :(得分:0)

对我来说,要在main.js中添加css文件。 ->但是没有断言

import "./style/myStyle.css"

另外,我发现在浏览器的Dev-Console上的css文件位于来源> Webpack-internal>。> src

enter image description here