Question

安装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"

Answer 1

我希望有人对此表示满意，以说明如何精确设置gatsbys sass插件。我根本无法正常工作。

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

我从gatsby-plugin-sass的插件数组中删除了gatsby-config.js，将其关闭（但我没有使用npm卸载它）
我安装了postcss-node-sass和postcss
我将此信息添加到了gatsby-config.js中的插件数组中：

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

我在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`,
      }),
    ],
  })
}

Answer 2

我参加聚会有点晚了，但希望这可以对某人有所帮助。我具有Sass设置并可以与Gatsby一起使用，而无需进行很多额外的配置。

通过node-sass安装gatsby-plugin-sass和npm。

npm install --save node-sass gatsby-plugin-sass

将gatsby-plugin-sass包含在gatsby-config.js的{{1}}文件中，如下所述，以及您可能使用的任何其他Gatsby插件。

plugins: []

将样式写为module.exports = { siteMetadata: { title: `#`, description: `#`, author: `#`, }, plugins: [ `gatsby-plugin-sass`, ], }或.sass文件，然后在主.scss文件或{{中导入主styles.scss（或您喜欢的名称） 1}}文件，如下所示，使用您的Layout.js文件位置的路径。

gatsby-browser.js

我希望这对您有用，但是如果您有任何其他麻烦，请添加评论，我将尝试回复。

Answer 3

使用sass代替node-sass节省了我的时间。

删除node-sass

npm uninstall node-sass
or
yarn remove node-sass

并添加sass或dart-sass

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

然后编辑gatsby-config.js

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

现在运行gatsby develop

：）

Gatsby使用gatsby-plugin-sass开发失败

3 个答案: