Webpack - 在外部文件

Question

我已经知道您可以导入同一文件夹中的文件，例如，如果我要使用以下文件：

@import "mixins"

.hero { 
    @include hero
}

这可以按预期工作，但我想要做的是以下内容：

index.ts：

import "../global.scss"
import "../hero.scss"

global.scss看起来像这样：

@import "mixins";
@import "functions";

所以我使用全局来导入我所有的全局样式我希望在其中包含我的Mixins，变量和函数，所以我的scss的其余部分可以使用它。

然而，问题是heros scss文件无法识别全局文件并且表示mixin hero不存在。

其他人如何解决此问题？我真的不想将mixins导入到需要它们的每个文件中。

让我知道你的想法

Answer 1

要使用SCSS mixins，您必须使用SCSS导入它们。当您在.ts文件中导入它们时，您的SCSS已经通过SCSS编译器运行并转换为CSS，因此hero文件与global文件没有连接就SCSS而言。

您需要在第一个示例中使用@import "mixins"。