无法将 CSS 加载到 Vue cli 项目中。 Mimetype 始终是 html

Posted 2023-02-22

【中文标题】无法将 CSS 加载到 Vue cli 项目中。 Mimetype 始终是 html

【英文标题】：Can't load CSS into Vue cli project. Mimetype is always html

【发布时间】：2018-12-02 18:04:54

【问题描述】：

我已经使用 vue cli 创建了一个自定义 vue 项目。我包括路由器和 vuex。我在 src/assets/css/ 中有 bootstrap.min.css 和 styles.css

在我的 App.vue 样式标签中，我使用以下内容：

@import './src/assets/css/bootstrap.min.css'; @import './src/assets/css/styles.css';

当我执行 npm run serve 时，这些文件以 html 格式提供。感觉就像我已经尝试了此导入路径的一百万种变体，但没有任何效果。我已经将它包装在一个 URL 中，我在 main.js 中“需要”它。没有任何效果。

【问题讨论】：

尝试将路径更改为@import ‘~@/assets/css/bootstrap.min.css’，如果文件不存在，您的终端应该会输出一些错误。

这个答案可能会帮助你更多***.com/a/24102070/336392如果你通过像nginx这样的http服务器运行应用程序，那么还有更多的配置要做。

在这里查看我是如何做到的：github.com/syed-haroon/vue-cli3-starter-template

【参考方案1】：

我尝试在我的 main.js 文件而不是 app.vue 标签中导入文件，并注意到“找不到模块……/assets/img/bg1.jpg”等错误。结果是我的 styles.css 文件中的所有资产路径都需要更正才能正常工作。

感谢所有提供帮助的人！

【参考方案2】：

如果你从 node_modules 中提取它应该可以工作：

@import "~bootstrap/scss/bootstrap";

检查我是如何做到的here。