在不同文件中导入相同的 CSS 文件时防止重复答案

【问题标题】：Preventing duplication when importing the same CSS file in different files在不同文件中导入相同的 CSS 文件时防止重复
【发布时间】：2019-06-22 01:25:30
【问题描述】：

我有一个使用 Sass 进行 CSS 处理的 Angular 项目，我正在研究 Tailwind。我想将 Tailwind 导入到各种组件 Sass 文件中，以便扩展它们，但我看到当我两次导入同一个文件时，它在 Angular 生成的文件中出现了两次。

是否有某种组织方式或某种方法可以避免重复？还是我把问题想错了？

【问题讨论】：

您导入的 SASS 文件无法输出任何 CSS 样式。它应该只包含 mixin、变量和类似的东西。
这是 Tailwind 输出文件，所以这不是一个选择。

标签： angular sass tailwind-css

【解决方案1】：

将 sass 文件导入不同的组件会导致每个组件都拥有该 sass 文件中声明或定义的任何内容的副本。现在这对于变量和 mixin 来说没问题，因为编译器可以优化掉相同的匹配变量名称和 mixin，但对于常规类则不然，因为您定义的类最终将使用每个组件的自定义名称修饰来限定组件的范围。因此，每个组件将生成的 css 将包含具有稍微命名/附加属性的相同类。

您可能应该将您的 tailwindcss 导入您的全局 style.scss 以避免重复。

https://github.com/angular/angular-cli/issues/8431

【讨论】：