0

I am trying to use new features in SCSS. And i get error when I use @use, @debug

Error:

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;

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

Both files are in one directory

File token.scss:

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

File 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

1 Answer 1

0

@use is not supported in node-sass yet. You have to use @import instead. Currently only dart-sass supports @use.

1
  • 1
    Thank you @gh05d! You solved my problem! I had to remove node-sass and sass (global). Then I was installed again sass (local) and used dart version of compiler into gulp config — sass.compiler = require("sass")
    – Meshock
    Jun 12, 2020 at 16:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.