Vue 3 (CLI) 多次导入全局样式

Question

所以，我有 scss 个具有全局样式的文件。这个文件看起来是这样的：

@import "colors";
@import "border-radius";
@import "box-shadow";
@import "paddings";
@import "margins";
@import "fonts-famalies";
@import "font-sizes";
@import "transition-durations";
@import "global-path";

@import "mixins";
@import "mixins-properties";

@import "../design/animations/fade-animation";

::v-global(*), ::v-global(*::before), ::v-global(*::after) {
  box-sizing: border-box;
  outline-color: var(--color-outline__global);
  transition: background-color 0.2s linear;
}

::v-global(html), ::v-global(body), ::v-global(#application) {
  font-family: var(--font-famaly__comfortaa);
  background-color: var(--color-background__global);
  color: var(--color-font__content);
  margin: 0;
  font-size: 95%;
  height: 100vh;
  overflow-wrap: anywhere;
}

v:global(a) {
  color: var(--color-font__link);
}

使用 vue.config.js 和此配置的样式导入：

module.exports = defineConfig({
  transpileDependencies: true,

  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/styles/global/global.scss";
        `
      }
    }
  }
})

一切都很好，但是当我在 chrome 中打开开发者控制台时，我看到了类似 that 的图片。当我检查 HTML I see a lot of same css imports 中的 header 标签时。如果我评论所有 css 样式 - header 仍然有很多样式。我究竟做错了什么？我认为 loader

中的问题

Answer 1

如果您要添加全局导入（例如共享 SCSS 变量和混合），请不要在该导入中放置任何全局样式。

scss-loader 的 additionalData 修改它使用给定字符串模板加载的每个 scss 文件。因此，您将在每个组件的样式块的开头放置一个带有全局样式定义的导入。

要解决此问题，请将所有 v-global(html) 样式和动画移动到不同的文件中，然后在 index.html 或 App.vue 中导入一次.确保您要在组件中自动导入的文件仅包含不会自行生成任何样式的代码（因此 scss 变量、mixins、函数等都可以）。通常将此文件命名为 'variables.scss' 或类似名称，因此不会意外地在此文件或其依赖项中结束样式定义。

Vue 3 (CLI) 多次导入全局样式

Vue 3 (CLI) imports global styles many times than need

css

import

sass

vue.js

vue-cli