时间戳

首页 > 解决方案 > 尝试使用导入的 Sass 变量时出错

html - 尝试使用导入的 Sass 变量时出错

问题描述

我正在使用 VSCode 的 Live Sass 编译器扩展。我已经对其进行了设置，以便它在单独的文件中输出 css。

编译完成后会引发以下错误（与 @import 而不是 @use 相同）：

Error: Invalid CSS after "...und-color: base": expected expression (e.g. 1px, bold), was ".$primary-color;"
        on line 5 of sass/.......\test.scss
>>   background-color: base.$primary-color;
   ------------------------^

我的目录：

│   index.html
│
├───css
│       test.css
│       test.css.map
│
└───scss
        test.scss
        _base.scss

萨斯版本：

$ sass --version
1.38.0 compiled with dart2js 2.13.4

_base.scss：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

样式.scss：

@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

关于导致此错误的任何想法？

标签： htmlcsssass

解决方案

使用@import代替@use并直接引用$primary-color如下：

@import 'base';
.inverse {
  background-color: $primary-color;
  color: white;
}

希望这有帮助。

推荐阅读