1

我有一个文件夹，用于存储项目的所有变量和函数。由其自己的文件中的功能分隔，并强烈使用命名空间。

现在，可能是因为对 dart-sass 缺乏了解，我不得不在每次需要时使用 @use 导入所有这些文件。

索引.scss

@use "core/color";
@use "core/font";
@use "core/spacing";
@use "core/breakpoint" as bp;
@use "core/mixins/normalize";
@use "core/functions" as *;

body {
    background-color: color.$background;

    font-family: font.$family;
    font-size: rem(16px); // rem is a function inside _functions.scss
}

.row {
    max-width: spacing.$content-max-width;
    padding: 0 spacing.$content-padding;


    @media (max-width: bp.$sm) {
        padding: 0 spacing.$content-padding-sm;
    }
  
}

.btn {
    @include normalize.button;
}

所以我的问题是：有没有办法通过单个@use 获得相同的功能？ 我认为这样的事情会起作用，但似乎@forward 不接受名称空间，只接受前缀。

// 下面的不行，不要尝试。我只是想展示我想要实现的目标

核心/_index.scss

@forward "color" as color;
@forward "font" as font;
@forward "spacing" as spacing;
@forward "breakpoint" as bp;
@forward "mixins/normalize" as normalize;
@forward "functions";

索引.scss

@use "core" as *;

body {
    background-color: color.$background;

    font-family: font.$family;
    font-size: rem(16px); // rem is a function inside _functions.scss
}

.row {
    max-width: spacing.$content-max-width;
    padding: 0 spacing.$content-padding;


    @media (max-width: bp.$sm) {
        padding: 0 spacing.$content-padding-sm;
    }
  
}

.btn {
    @include normalize.button;
}
4

0 回答 0