将Sass文件与'@use'sass:color'一起使用后，Gatsby失败 [英] Gatsby fails after using Sass files with '@use 'sass:color'

问题描述

我正在使用 gatsby-plugin-sass 建立一个Gatsby项目.

I'm setting up a Gatsby Project with gatsby-plugin-sass.

我的 gatsby-config.js 文件:

module.exports = {
  plugins: [
    'gatsby-plugin-resolve-src',
    'gatsby-plugin-sass',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
  ],
}

我具有以下样式文件结构:

|
|src
|-styles
|--base
|--- _variables.scss
|--components
|--- _Buttons.scss
|--- ...
|--main.scss

我要导入的我的 _Buttons.scss 文件是这样的:

Im my _Buttons.scss file I'm importing like this:

@import '../base/variables';
@use 'sass:color as *;

当我尝试像这样使用 sass颜色功能时(如

When I'm trying to use the sass color functions like this (as specified on https://sass-lang.com/documentation/modules)

%buttons-focus {
  background-color: color.adjust($primary-color, $alpha: -0.5);
}

我收到以下错误消息:

Invalid CSS after "...nd-color: color": expected expression (e.g. 1px, bold), was ".adjust($primary-co"

在main.scss中，我将导入如下样式:

In my main.scss I'm importing styles like this:

@import './components/Buttons';

---

我在监督什么吗?我尝试用 @import 更改 @use ，但是没有运气.对我来说，好像gatsby-sass-plugin不知道sass模块.

---

Am I overseeing something? I've tried changing up @use with @import, with no luck. For me it seems like the gatsby-sass-plugin is not aware of sass modules.

推荐答案

gatsby-plugin-sass 在后台使用了 node-sass .但是，为了使用@use支持内置模块，您需要将 gatsby-plugin-sass 配置为使用 dart-sass .见下文.

gatsby-plugin-sass uses node-sass under the hood. But in order to support built-in modules with @use, you need to configure gatsby-plugin-sass to use dart-sass instead. See below.

仅Dart Sass当前支持使用@use加载内置模块.其他实现的用户必须改为使用其全局名称来调用函数.

Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.

其他Sass实现-gatsby-plugin-sass

默认情况下，使用Sass的节点实现(node-sass).要使用Dart(dart-sass)编写的实现，可以安装sass而不是node-sass并将其作为实现传递给选项:

By default the node implementation of Sass (node-sass) is used. To use the implementation written in Dart (dart-sass), you can install sass instead of node-sass and pass it into the options as the implementation:

npm install --save-dev sass

---

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("sass"),
    },
  },
]

这篇关于将Sass文件与'@use'sass:color'一起使用后，Gatsby失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！