从 HTML header 导入 CSS VS JS 文件 VS Vue 组件的区别
Difference between importing CSS from HTML header VS JS file VS Vue Component
我正在尝试使用 Vue（安装了 webpack）并且想知道导入方法的区别是什么 CSS。似乎可以通过三种方式导入 CSS:
- 正在 HTML headers 中导入样式表：
<link type="text/css" rel="stylesheet" ... >
- 从 JS 文件导入 css 文件（例如 main.js）：
import '@/assets/css/app.cs' / require
- 在 Vue 样式标签内导入 css 文件：
<style>@import '...'</style>
在哪些情况下我们希望使用一种导入方法而不是另一种方法？最好的程序是什么？
据我了解，从 HTML headers 导入充当 "global" 样式表。如果您需要 Reset 或 Normalize CSS 根本不需要与其余组件交互的文件，这将特别有用。
从 JS 文件导入是 webpack 的一项功能。我通常使用它来将样式导入到我的主要（或）单个页面组件，然后共享它们的 child 组件的样式表。
最后，VueJS 样式标签通常用于 "scoped" 样式。如果您需要为许多 child 组件设置独特的样式并且不想与其他组件样式冲突，这将特别有用。
您可以像这样使用范围样式。
<style scoped>
/* Your styles over here /*
</style>
您还可以在 Vue 样式标签中使用 CSS Pre-processors，例如：
<style lang="scss">
<style lang="less">
当然 pre-processor 样式也可以有 scoped 属性。
我正在尝试使用 Vue（安装了 webpack）并且想知道导入方法的区别是什么 CSS。似乎可以通过三种方式导入 CSS:
- 正在 HTML headers 中导入样式表：
<link type="text/css" rel="stylesheet" ... > - 从 JS 文件导入 css 文件（例如 main.js）：
import '@/assets/css/app.cs'/require - 在 Vue 样式标签内导入 css 文件：
<style>@import '...'</style>
在哪些情况下我们希望使用一种导入方法而不是另一种方法？最好的程序是什么？
据我了解，从 HTML headers 导入充当 "global" 样式表。如果您需要 Reset 或 Normalize CSS 根本不需要与其余组件交互的文件，这将特别有用。
从 JS 文件导入是 webpack 的一项功能。我通常使用它来将样式导入到我的主要（或）单个页面组件，然后共享它们的 child 组件的样式表。
最后，VueJS 样式标签通常用于 "scoped" 样式。如果您需要为许多 child 组件设置独特的样式并且不想与其他组件样式冲突，这将特别有用。
您可以像这样使用范围样式。
<style scoped>
/* Your styles over here /*
</style>
您还可以在 Vue 样式标签中使用 CSS Pre-processors，例如：
<style lang="scss">
<style lang="less">
当然 pre-processor 样式也可以有 scoped 属性。