Gatsby Develop Failing с использованием gatsby-plugin-sass

Question

После установки модуля gatsby-plugin-sass:

Когда я пытаюсь запустить сборку 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

Я работаю над разрешением это часами. Я попытался:

• пользовательские правила веб-пакета в gatsby- node.js для файлов sass
• чтение, повторное чтение и повторное чтение инструкции на сайте gatsby
• обновление сообщения CSS с использованием npm всеми возможными способами.

Пока ничего не получалось.

Почему так сложно заставить работать sass с Гэтсби? Когда документация на сайте Гэтсби кажется такой простой?

Какие-нибудь предложения, что я могу сделать, чтобы заставить это работать?

в 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`,

---

строка импорта sass в gatsby-browser. js:

import "./src/indexs.sass"

Answer 1

Надеюсь, кто-то вмешивается в это, чтобы показать, как именно настроить плагин sats для gatsbys. Я не мог заставить это работать вообще.

Но я нашел обходной путь в моем случае:

1. Я удалил gatsby-plugin-sass из массива плагинов в gatsby-config.js, отключив его (но я не сделал удалите его, используя npm)

2. Я установил postcss-node-sass и postcss

3. Я добавил эту информацию в массив плагинов в gatsby -конфиг. js:

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

Я добавил пользовательское правило для веб-пакета в 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`,
      }),
    ],
  })
}