从HTML标头VS JS文件VS Vue组件导入CSS之间的区别

Question

我正在试验Vue（安装了webpack），并想知道导入CSS的方法有什么不同。好像有三种方法可以导入CSS：

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

在哪种情况下我们想要使用一种导入方法而不是另一种方法？最好的程序是什么？

Answer 1

据我了解，从HTML标题导入的行为是＆＃34;全球＆＃34;样式表。如果您需要重置或标准化CSS文件（根本不需要与其他组件进行交互），这将非常有用。

从JS文件导入是一个webpack功能。我通常使用它将样式导入我的主（或）单个页面组件，然后共享其子组件的样式表。

最后，VueJS样式标签通常用于＆＃34;范围＆＃34;样式。如果您需要为许多子组件设置唯一样式并且不想与其他组件样式冲突，这将非常有用。

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

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

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

<style lang="scss">

<style lang="less">

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