javascript - 从 HTML header VS JS 文件 VS Vue 组件导入 CSS 的区别

Question

我正在尝试使用 Vue(安装了 webpack)，想知道导入 CSS 的方法有何不同。似乎可以通过三种方式导入 CSS:

1. 在 HTML 标题中导入样式表:<link type="text/css" rel="stylesheet" ... >
2. 从 JS 文件(例如 main.js)导入 css 文件:import '@/assets/css/app.cs'/require
3. 在 Vue 样式标签中导入 css 文件:<style>@import '...'</style>

在哪些情况下我们希望使用一种导入方法而不是另一种方法？这方面的最佳程序是什么？

Answer 1

据我了解，从 HTML header 导入充当“全局”样式表。如果您需要重置或规范化 CSS 文件而根本不需要与其余组件交互，这将特别有用。

从 JS 文件导入是 webpack 的一个特性。我通常使用它来将样式导入到我的主要(或)单个页面组件，然后它们共享子组件的样式表。

最后，VueJS 样式标签通常用于“作用域”样式。如果您需要为许多子组件设置独特的样式并且不想与其他组件样式冲突，这将特别有用。

您可以像这样使用范围样式。

<style scoped>
/* Your styles over here /*
</style>

您还可以在 Vue 样式标签中使用 CSS 预处理器，例如:

<style lang="scss">

<style lang="less">

当然预处理器样式也可以有scoped属性。