使用 vue-cli 时在 index.html 文件中导入 .css 和 cdn

Question

你好，希望大家平安，我在 /src/assets/css 中有一个浏览器 reset.css 文件，它将在我的 vue 项目中广泛使用。所以我想只需将它导入 /public/index.html 即可。然而，这不起作用，我在控制台中看到一个错误 - "The stylesheet http://localhost:8080/src/assets/css/styles.css was not loaded because its MIME type, “text/html”, is not “text/css”." 我正在使用

 <link rel="stylesheet" href="../src/assets/css/styles.css" type="text/css">

在 index.html 文件中。我正在使用 vue-cli3 并且想知道应用站点范围 css 规则的可接受方式是什么以及导入 CDN link 的正确方式是什么？我没有在 vue-cli 文档中看到这个场景。感谢大家。

Answer 1

href="../src/assets/css/styles.css"

我们这里不这样做。这不实用。 /public/index.html 是一个模板，将使用 html-webpack-plugin（打包你的 vue 应用程序）进行处理。在构建过程中，资产链接将自动注入

转到标记下的 App.vue 文件，在 export default

之前添加导入行

</template>
<script>
import '@/assets/css/styles.css';
.
.
.

如果您需要组件中的作用域样式

只需在 <style scoped>

中添加 src=[import path above]

而且 Vue 文档写得很好。 https://cli.vuejs.org/guide/html-and-static-assets.html#html

使用 vue-cli 时在 index.html 文件中导入 .css 和 cdn

Importing .css and cdn's in the index.html file when using vue-cli

webpack

vue-cli-3