css - VueJS 中的全局样式与局部样式

Question

我正在构建一个包含 .vue 文件的元素，这使得在同一个文件中编写 CSS (SASS)、JS 和 HTML 成为可能。

我决定在 assets/styles/app.scss 文件中用 SASS 编写一些全局组件，这将加载我的网格、变量和混合宏。

最重要的是，我希望能够根据我所在的组件/页面编写一些本地 SASS 规则，在一个元素中同时使用这两种规则似乎很合乎逻辑......

本地看起来像这样:

<template>
</template>

<script>
</script>

<style lang="scss">
  @import "assets/styles/app";

  .my-style {
    color: $my-variable;
  }
</style>

它确实有效，例如我可以在我的本地 .vue 文件或我想要的任何混合中使用 $my-variable。问题是 VueJS 元素会增长，组件会一起显示页面。

我注意到每个组件都加载了全局样式，当我打开我的 chrome 开发者工具时，相同的规则出现在 5x、10x 中。这仍然是一个非常小的元素；每次我将组件添加到同一页面时，我所有的样式基本上都会被浏览器复制和加载。

如何避免多次加载全局样式，同时能够在每个组件中使用全局 SASS 代码？

我以前从未使用过本地样式与全局样式的混合，我更喜欢将样式完全抽象到一个单独的结构中，但这对于在同一位置使用本地所有内容进行编码要方便得多。

我在这里做错了什么？

详细信息:我在使用 NuxtJS，但我认为这个问题总体上与 VueJS 更相关。

Answer 1

基本上，每次你做 @import在您的组件中，它会将另一个副本附加到 Webpack 生成的主 CSS 文件。

假设您正确配置了 Webpack SCSS 加载器(我相信您在编译后就这样做了)，您应该能够在 app.vue 中导入一次 SCSS 文件。 SCSS 编译器会在附加所有其他 CSS 时找到它。

例如获取全局字体和mixins:

<style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
  @import "@/scss/mixins.scss";
</style>

然后在组件的 <style> 中为每个组件创建 CSS部分。只需确保添加 lang="scss"所以它全部编译。

您可能还想查看 scss-resource-loader对于 Webpack。我认为这是在最新的 CLI 构建中，不确定 Nuxt。