Gatsby开发失败使用gatsby插件-sass

Question

安装模块后：

当我尝试运行gatsby构建时，我会得到以下错误：

 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

我已经努力解决这个问题好几个小时了。我试过：

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

是如何实现的。

到目前为止，一切都不起作用。

为什么和盖茨比一起工作这么复杂？当盖茨比的网站上的文档让它看起来如此简单的时候？

有什么建议吗?我能做些什么来让这件事发挥作用？

在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

使用sass而不是node-sass节省了我的时间。

删除node-sass

npm uninstall node-sass
or
yarn remove node-sass

并添加sass aka 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

:)

Answer 2

我参加派对有点晚了，但希望这能帮上忙。我有Sass设置和与盖茨比工作，而不需要太多额外的配置。

​

通过npm.安装

1. node-sass和gatsby-plugin-sass

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

​

1. 在plugins: []中的gatsby-config.js文件中包含gatsby-plugin-sass，如下所示，与您可能使用的任何其他盖茨比插件一起使用.

module.exports = {
    siteMetadata: {
        title: `#`,
        description: `#`,
        author: `#`,
    },
    plugins: [
        `gatsby-plugin-sass`,
    ],
}

​

1. 将您的样式编写为.sass或.scss文件，并使用到styles.scss文件位置的路径将主styles.scss (或任何您喜欢命名的名称)导入到主Layout.js文件或gatsby-browser.js文件中。

<代码>G 225

import "./src/styles/styles.scss"

​

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

Answer 3

我希望有人参与进来，以显示如何准确地设置盖茨比sass插件。我根本没办法让它起作用。

但我在我的案子里找到了解决办法：

postcss

• I gatsby-config.js:

从gatsby-config.js插件数组中删除了gatsby-plugin-sass，关闭了gatsby-plugin-sass(但没有使用npm卸载)

• 安装了postcss-node-sass，并将此信息添加到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`,
      }),
    ],
  })
}