尝试使用 @use at-rule 时出现 SASS 错误

Question

我正在尝试使用 SCSS 中的新功能。当我使用@use、@debug

时出现错误

错误：

Error in plugin "sass"
    Message:
        src/scss/style.scss
    Error: Invalid CSS after "...e-height: tokens": expected expression (e.g. 1px, bold), was ".$my;"
            on line 27 of src/scss/style.scss
    →→   line-height: tokens.$my;

       ---------------------^

两个文件在一个目录下

文件token.scss:

// tokens.scss;    
$my: 32px;

文件style.scss:

// style.scss
@use 'tokens';

.link {
  font-family: $font-family;
  line-height: tokens.$my;
  color: $link-color;
  display: inline;
}

package.json:

…
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.10",
    "node-sass": "^4.14.1",
    "prettier": "^2.0.5",
    "stylelint": "^13.6.0",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-prettier": "^1.1.2",
…

sass

@MacBook-Pro-Admi frontend-gulp % sass --version
1.26.8 compiled with dart2js 2.8.4

Answer 1

@use是not supported in node-sass yet. You have to use @import instead. Currently only dart-sass支持@use.

尝试使用 @use at-rule 时出现 SASS 错误

Error in SASS when trying to use @use at-rule

sass

gulp-sass