Sass @use未加载部分

Question

我正在尝试导入sass部分（_variables.scss）以在主样式表（global.scss）中使用，但是我一直Error: Undefined variable.在进行sass编译。

目录结构：

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

_variables.scss

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

global.scss

@use '_variables';

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

查看Sass文档，我理解使用@use代替@import（有效），因为他们正在逐步淘汰它。

我在这里做错了什么？谢谢。

Answer 1

那是因为您没有使用支持此功能的Dart Sass。

同样在文档中，您将找到：

当前仅Dart Sass支持@use。其他实现的用户必须使用@import规则。

因此，@import直到@use支持使用。

顺便说一句，如果您想使用Dart Sass，请在Webpack配置中使用sass代替node-sass并要求它，例如：

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

Answer 2

简答

\n

\n

您可以通过编写 <namespace>.<variable>、<namespace>.<function>()> 或 @include <namespace>.<mixin>() 从另一个模块访问变量、函数和 mixins。默认情况下，命名空间只是 module\xe2\x80\x99s URL 的最后一个组成部分。

\n

\n

这意味着通过使用变量。$font-text

\n

全局.scss

\n

@use \'_variables\';\n\nbody {\n  font-family: variables.$font-text;\n}\n

\n

有关加载成员的 SASS 文档

\n

长答案

\n

所以@llobet 的答案是使用webpack，@Jamie Marshall 的答案是使用 gulp 文件，但我试图使用SASSusingNode JS并需要一个逐步的指南才能使其工作。

\n

这是我的工作方式- 使用with@use的分步指南。Dart SassNode JS

\n

1.新建节点项目

\n

npm init\n

\n

2.安装Dart SASS

\n

npm i sass\n

\n

您也可以选择使用安装 AutoPrefixernpm install postcss-cli autoprefixer

\n

3.配置NPM脚本编译SASS

\n

在Package.json中，添加脚本compile:sass将sass编译为css

\n

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

\n

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

\n

上面的脚本compile:sass需要一个scss在项目根目录下调用的文件夹以及.scss该文件夹内的一个文件

\n

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

\n

@use \'_variables\';\n\nbody {\nfont-family: variables.$font-text;\n}\n

\n

5.创建部分文件_variables.scss

\n

_variables.scss在同一目录下创建一个名为的部分文件scss并将以下代码粘贴到其中

\n

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

\n

6.将SASS编译为CSS

\n

在项目的根文件夹中运行以下脚本将 SASS 编译为 CSS

\n

npm run compile:sass\n

\n

现在您将看到一个名为 的文件夹assets，其中将有一个名为 的文件夹css，并在其中css编译您的文件。

\n