Vue2导入CSS文件

Question

使用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

任何帮助将不胜感激。

谢谢

Answer 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>

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

Answer 2

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

import "./style/myStyle.css"

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