Vue2导入css文件

Question

使用vue 2.6.8

我正在尝试将css文件导入到组件中。

这就是我尝试过的，但它不起作用。

在我添加的其他导入下面的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.js的应用程序中，我将导入放在<style>中。

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

至于文件的路径，它们位于相同的层次结构行中，因此可以选择放置./或直接启动assets/

在App.vue中：

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

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

Answer 2

我在main.js上添加了css-file。->，但没有断言

import "./style/myStyle.css"

另外，我发现css文件列在Dev-Console中的浏览器中的sources>Webpack-internal>.>src

​

​