0

安装 gatsby-plugin-sass 模块后：

当我尝试运行 gatsby build 时，出现以下错误：

 ERROR 

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.26. Perhaps this is the source of the error below.


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Browser queries must be an array or string. Got object.

File: src/indexs.sass

failed Building development bundle - 9.200s

几个小时以来，我一直在努力解决这个问题。我努力了：

  • gatsby-node.js 中用于 sass 文件的自定义 webpack 规则
  • 阅读、重新阅读和重新阅读 gatsby 网站上的说明
  • 以我知道的各种方式使用 npm 更新 PostCSS

到目前为止，没有任何效果。

为什么让 sass 与 gatsby 合作如此复杂？当 gatsby 网站上的文档让它看起来如此简单时？

有什么建议我可以做些什么来让它工作吗？

在 gatsby-node.js 中：

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  // console.log('rules',rules)
  // console.log('rules.css',rules.css())
  // console.log('rules',rules.postcss())
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',

          ],
        },
      ],
    },
    plugins: [
      plugins.define({
        __DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
      }),
    ],
  })
}

在 gatsby-config.js 中：

    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [require(`postcss-preset-env`)({ stage: 0 })],
      },
    },
    `gatsby-plugin-sass`,

gatsby-browser.js 中的 sass 导入行：

import "./src/indexs.sass"
4

3 回答 3

2

使用sass而不是node-sass节省了我的一天。

消除node-sass

npm uninstall node-sass
or
yarn remove node-sass

并添加sassakadart-sass

npm install --save-dev sass
or
yarn add sass

然后编辑gatsby-config.js

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

现在运行gatsby develop

:)

于 2020-12-13T07:47:15.877 回答
0

我希望有人能加入进来，展示如何准确地设置 gatsbys sass 插件。我根本无法让它工作。

但我确实找到了一种解决方法：

  1. 我gatsby-plugin-sass从插件数组中删除gatsby-config.js，将其关闭（但我没有使用 npm 卸载它）

  2. 我安装postcss-node-sass并postcss

  3. 我将此信息添加到 gatsby-config.js 中的插件数组中：

    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require(`postcss-preset-env`)({ stage: 0 }),
          require(`postcss-node-sass`)(),
        ],
      },
    },
  1. 我在 gatsby-node.js 中为 webpack 添加了一个自定义规则：
exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  // console.log('rules',rules)
  // console.log('rules.css',rules.css())
  // console.log('rules',rules.postcss())
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',

          ],
        },
      ],
    },
    plugins: [
      plugins.define({
        __DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
      }),
    ],
  })
}
于 2020-02-01T20:33:04.647 回答
0

我参加聚会有点晚了，但希望这可能对某人有所帮助。我有 Sass 设置并与 Gatsby 一起工作，不需要太多额外的配置。


  1. 同时安装node-sass和gatsby-plugin-sass通过npm.
npm install --save node-sass gatsby-plugin-sass

  1. 将您可能使用的任何其他 Gatsby 插件包含gatsby-plugin-sass在您的gatsby-config.js文件中，如下所示。plugins: []
module.exports = {
    siteMetadata: {
        title: `#`,
        description: `#`,
        author: `#`,
    },
    plugins: [
        `gatsby-plugin-sass`,
    ],
}

  1. 将您的样式写入.sass或文件，然后使用文件位置的路径在您的主文件或文件中.scss导入您的主文件styles.scss（或您喜欢的任何名称） ，如下所示。Layout.jsgatsby-browser.jsstyles.scss
import "./src/styles/styles.scss"

我希望这对您有用，但如果您有任何其他问题，请添加评论，我会尝试回复。

于 2020-07-17T14:14:31.590 回答