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

问题描述

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

标签： sassgatsbypostcsspostcss-loader

使用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

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

问题描述

解决方案

推荐阅读