@use指令用不了

我知道Node SCSS和Dart SCSS有差异,结果没想到差异来的这么快,我按照官方教程录入了如下的代码,结果始终无法运行:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

后来我才发现,是因为我使用了node scss的原因,我将node scss切换成drat scss,该问题修复了。

2022-03-16-17-34-01

升级Node SCSS到Daft SCSS

参考资料

  1. SCSS: @use, @forward: Cannot use modules and access it’s members

    在该资料中发现了是因为Node SCSS不支持@use

  2. SASS/SCSS 簡介

    在该资料中知道了@import和@use的区别。

  3. Node Sass to Dart Sass

    在该资料中知道了Drat SCSS和Node SCSS的区别,并知道了如何升级Node SCSS到Daft SCSS。