Vue2 导入 css 文件

Posted 2023-02-22

【中文标题】Vue2 导入 css 文件

【英文标题】：Vue2 import css file

【发布时间】：2019-11-04 23:32:52

【问题描述】：

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

任何帮助将不胜感激。

谢谢，

【参考方案1】：

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

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

至于文件的路径，它们在同一层次行，所以可以选择放./或者直接启动assets/

在 App.vue 中：

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

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

【参考方案2】：

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

import "./style/myStyle.css"

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