Sass @use 无法加载局部文件。

Question

Sass @use 无法加载局部文件。

26

我试图导入Sass的一个局部文件（_variables.scss），用于我的主样式表格（global.scss）。但是在编译Sass时，我不断收到 Error: Undefined variable. 的错误提示。

目录结构：

app
└─public
  └─styles
    │  global.css (output for sass compiling is here).
    └─sass
      └─_variables.scss
      └─global.scss

_variables.scss

$font-text: 'lato', sans-serif;

全局样式表.scss

@use '_variables';

body {
  font-family: $font-text;
}

查看Sass文档后，我了解到要使用@use而不是@import（虽然@import也可以用），因为它们正在逐步淘汰。

请问我做错了什么？谢谢。

- Sam Sverko

3个回答

5

简短回答

您可以通过编写<命名空间>.<变量>, <命名空间>.<函数>()或@include <命名空间>.<混合物>()来从另一个模块访问变量、函数和混合物。默认情况下，命名空间只是模块 URL 的最后一个组件。

这意味着可以使用变量.$font-text

global.scss

@use '_variables';

body {
  font-family: variables.$font-text;
}

SASS文档-加载成员

长答案

所以，@llobet的答案使用了webpack，而@Jamie Marshall的答案使用了gulp文件，但我正在尝试使用Node JS和SASS，需要一步一步的指南来使它正常工作。

以下是我如何使用Dart Sass和Node JS使@use工作的详细指南。

1. 创建新的Node项目

npm init

2. 安装Dart SASS

npm i sass

你可以选择使用 npm install postcss-cli autoprefixer 来安装 AutoPrefixer。

3. 配置 NPM 脚本以编译 SASS

在 Package.json 中，添加一个名为 compile:sass 的脚本以将 sass 编译成 css。

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "compile:sass": "sass --watch scss:assets/css"
},

4. 创建 SCSS 文件夹并在其中创建 style.scss 文件

上面的脚本 compile:sass 需要一个名为 scss 的文件夹位于项目根目录下，且该文件夹内部有一个后缀名为 .scss 的文件。

将以下内容粘贴到 .scss 文件中：

@use '_variables';

body {
font-family: variables.$font-text;
}

5. 创建局部文件_variables.scss

在同一目录scss中创建一个名为_variables.scss的局部文件，然后将以下代码粘贴到其中：

$font-text: 'lato', sans-serif;

6. 编译SASS为CSS

在项目的根目录中运行以下脚本以将SASS编译为CSS。

npm run compile:sass

现在你会看到一个名为assets的文件夹，里面有一个名为css的文件夹，而里面则是已编译好的css文件。

- Hamza Khanzada

我漏掉了 variables 限定符。 - dudeNumber4

4

这是对@llobert的已接受答案的非常重要的更新。经过数小时的搜索，发现node-sass依赖于libsass，这是sass的C++实现。根据libsass的文档repository，这个C++实现已被弃用。

好的，你可能认为安装Dart-Sass很容易，但是你会发现文档也落后了。如果你去npm上的Dart-Sass，你会发现：

现在你需要做的是：

npm install sass

如果读者像我一样正在研究整个Sass事件，因为他们正在使用gulp-sass：

在gulp-sass npm页面的底部，您会找到这个小贴士。

啊，你知道什么。默认设置没有改变，但是由于过时，底层的libsass库已经落后了。因此，您必须将以下内容添加到您的gulp文件中：

var sass = require('gulp-sass');
sass.compiler = require('sass');

简而言之，SASS世界正在发生一些重大变化，但似乎很安静地发生了。我希望这篇文章能够节省一些未来开发人员的时间，避免在文档整理好之前进行冗长的搜索。

- Jamie Marshall

这个重命名已经发生了一段时间，我在我的回答中已经将其称为“sass”包。 - llobet

@llobet - 是的，但当我看了你的答案后，我完全忽略了"sass"这一部分。由于所有文档都指向不同的方向，要意识到你的解决方案是正确的需要进行深入挖掘。此外，还有很多其他地方发布了错误信息，没有全面的故事就像大海捞针一样难以找到正确的信息。如果像我一样，这个sass东西是构建的一部分，那么你还需要知道如何将这里获得的信息与可能使用的其他软件包的文档进行协调。 - Jamie Marshall

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- llobet · Accepted Answer

那是因为您没有使用支持此功能的Dart Sass。文档中还提到：只有Dart Sass才支持@use，其他实现的用户必须使用@import规则。因此，请在@use支持之前使用@import。顺便说一句，如果您想使用Dart Sass，只需使用sass而不是node-sass，并在webpack配置中require它，如下所示：

// ...
{
  loader: 'sass-loader',
  options: {
    implementation: require('sass')
  }
}
// ...