如何在 Vue 中加载外部 CSS答案

【问题标题】：How to load external CSS in Vue如何在 Vue 中加载外部 CSS
【发布时间】：2020-01-01 07:35:25
【问题描述】：

我创建了一个Vue 项目，其中Typescript 具有类样式的组件。我需要包含一些外部 CSS 文件——比如来自Amazon S3。 CSS 似乎没有加载。

在网络部分我可以看到它。

【问题讨论】：

你能发布你是如何包含 CSS 文件的，你是如何创建项目的？你用的是vue-cli还是？
是的，我使用了 vue-cli。我包括了 Babel、TS、TSlint，...我在 index.html 中简单地使用了<link rel="stylesheet" href=""> 更新了我的问题
How to include css files in Vue 2的可能重复

【解决方案1】：

我建议你使用preprocessor

安装SASS -

npm install -D sass-loader sass

那么你就可以在你的App.vueimport它了

<style lang="scss">
@import './static/css/style.css';
</style>

更新

我想出了另一种方法来包含单个 css 文件。

在您的App.vue 中，您可以将css 文件添加到样式src

<style src="relative-path/style.css"></style>

【讨论】：

为什么我需要在这里使用 scss。它只是 CSS 文件 ryt
正确，但 dynamic 导入需要 scss。这样，您甚至可以控制单个 css 对单个组件的导入。也有使用 webpack 的 JS 方式，但我推荐这里的 SASS 简洁实用。将来你可能想使用 scss
这是可选的
安装 sass <style lang="scss"> @import url('<some_url>'); </style> 后对我不起作用
是的，我安装了 sass。我把上面这行放在 App.vue

【解决方案2】：

您可以加载外部 URL

<style lang="scss or less">
    @import "https://external_url_.css";
    @import ".../assest/_.css";
</style>

如果你更喜欢sass-loader, css-loader , less-loader npm，你可以加载已安装的css加载器

【讨论】：