Question

我是Sass的新手，已经阅读了很多文档，但是似乎无法使用某些自定义scss覆盖设置文件。我需要各种按钮和颜色，因此我创建了_global.scss文件来创建新变量。我将其导入了app.scss。

当我尝试运行npm build时出现此错误：

Error in plugin 'sass'
Message:
    src/assets/scss/_global.scss
Error: Invalid CSS after "$hollow-margin": expected 1 selector or at-rule, was ": 0 0 $global-margi"
        on line 23 of src/assets/scss/_global.scss
>> $hollow-margin: 0 0 $global-margin 0;
   ^

这是app.scss文件：

@import 'global';
@import 'settings';
@import 'foundation-emails';

@import 'template/template';

这是_global.scss文件：

// New colors
$featured-color: #ED145B;


// 1. Hollow  Black Button
// ---------
$hollow-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 18px 8px 18px,
  large: 10px 20px 10px 20px,
);
$hollow-font-size: (
  tiny: 10px,
  small: 13px,
  default: 14px,
  large: 20px,
);

$hollow-color: $black;
$hollow-color-alt: $medium-gray
$hollow-background: $white;
$hollow-border: 2px solid $black;
$hollow-radius: $global-radius;
$hollow-rounded: $global-rounded;

// 1. Transparent Button
// ---------
$transparent-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 18px 8px 18px,
  large: 10px 20px 10px 20px,
);
$transparent-font-size: (
  tiny: 10px,
  small: 12px,
  default: 14px,
  large: 20px,
);

$transparent-color: $white;
$transparent-color-alt: $medium-gray
$transparent-background: none;
$transparent-border: 2px solid $white;
$transparent-radius: 2px;
$transparent-rounded: $global-rounded;

// 3. rounded grey Button
// ---------
$rounded-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 18px 8px 18px,
  large: 10px 20px 10px 20px,
);
$rounded-font-size: (
  tiny: 10px,
  small: 12px,
  default: 14px,
  large: 20px,
);

$rounded-color: #9B9B9B;
$rounded-color-alt: $light-gray
$rounded-background: #ED145B;
$rounded-border: 6px solid #ED145B;
$rounded-radius: $global-radius;
$rounded-rounded: $global-rounded;

Answer 1

我相信建议您针对要执行的操作修改/.../[project]/src/assets/_settings.scss文件中的全局CSS设置。例如，在那儿我将$ primary_color的值更改为想要用于电子邮件的值。

不导入电子邮件的基础的自定义Scss

1 个答案: