小编Hen*_*nry的帖子

Gatsby 在使用带有 '@use 'sass:color' 的 Sass 文件后失败

我正在使用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`,
      },
    },
  ],
}

Run Code Online (Sandbox Code Playgroud)

我有以下样式文件结构

|
|src
|-styles
|--base
|--- _variables.scss
|--components
|--- _Buttons.scss
|--- ...
|--main.scss
Run Code Online (Sandbox Code Playgroud)

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

@import '../base/variables';
@use 'sass:color as *;
Run Code Online (Sandbox Code Playgroud)

当我尝试使用这样的sass 颜色函数时(如https://sass-lang.com/documentation/modules所指定)

%buttons-focus {
  background-color: color.adjust($primary-color, $alpha: -0.5);
}
Run Code Online (Sandbox Code Playgroud)

我收到以下错误:

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

在我的 …

sass gatsby

6
推荐指数
1
解决办法
960
查看次数

标签 统计

gatsby ×1

sass ×1