如何在 Vue 中加载外部 CSS

Posted 2023-02-22

【中文标题】如何在 Vue 中加载外部 CSS

【英文标题】：How to load external CSS in Vue

【发布时间】：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加载器

【讨论】：

我已经安装了"css-loader": "^3.2.0",是否需要在任何地方配置。

不需要只是tr。如果您打算使用 less 或 scss（预处理器），您可以使用预处理器加载器移动。这是您的偏好。