css - 如何在 vue.js 应用程序中使用 CSS？

Question

我无法理解应该如何使用 CSS 构建网站。我知道每个组件都有自己的 CSS，但我应该对每个组件都这样做吗？如果组件很大且包含大量 CSS 怎么办？

我看过一些使用 vue.js 构建的网站，它们具有外部 CSS 文件，例如带有大量内部样式 block 的 app.css 文件。

我习惯于在它自己的 /styles 目录中使用 Sass 构建站点，并让 compass.app 将那些 .scss 文件编译成 .css 文件。

这是一个组件 CSS block 的示例:

<style lang="scss">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
  a {
    color: red;
  }
}
</style>

如果那是一千多行呢？我会把它移到外部 scss 文件中吗？如果是这样，怎么做？这一切是如何运作的？

谢谢。

Answer 1

如果您担心代码分离，您可以在组件中使用自定义 CSS 代码并添加一个 scoped 属性，这样您在那里编写的样式将仅适用于该组件:

<style lang="scss" scoped>

    /* your scoped css rules here will only apply to this component */

</style>

现在，如果您还想从所有组件编译 CSS 并将它们合并到一个最终的 CSS 文件中，您将从主 HTML 文件链接，那么您需要添加一个 bundler /编译器，例如 webpack

你也可以看看vue css-loader了解如何模块化和组合您的 CSS 规则。