PostCSSのプラグイン追加でエラー発生

コードの質問でなくすみませんが教えて下さい
以下のような環境でPostCSSのプラグインを利用しようとしています。
'autoprefixer'だけを利用している場合、問題なく動作するのですが
これに'css-declaration-sorter'を追加するとエラーが発生してしまいます

package.json

JSON
1{
2  "scripts": {
3    "build": "webpack",
4    "watch": "webpack --watch"
5  },
6  "devDependencies": {
7    "autoprefixer": "^9.7.4",
8    "css-declaration-sorter": "6.0.2",
9    "css-loader": "^3.4.2",
10    "postcss": "8.2.4",
11    "postcss-loader": "^3.0.0",
12    "sass": "^1.25.0",
13    "sass-loader": "^8.0.2",
14    "style-loader": "^1.1.3",
15    "webpack": "^4.41.6",
16    "webpack-cli": "^3.3.11"
17  },
18  "private": true,
19  "dependencies": {}
20}
21

webpack.config.js

JSON
1module.exports = {
2  mode: 'production',
3  devtool: 'source-map',
4  module: {
5    rules: [
6      {
7        test: /.scss/,
8        use: [
9          'style-loader',
10          {
11            loader: 'css-loader',
12            options: {
13              url: false,
14              sourceMap: true,
15              importLoaders: 2
16            },
17          },
18          {
19            loader: 'postcss-loader',
20            options: {
21              sourceMap: true,
22              plugins: [
23                require('autoprefixer')({grid: true}),
24                require('css-declaration-sorter')({
25                  order: 'alphabetical'
26                }),
27              ]
28            },
29          },
30          {
31            loader: 'sass-loader',
32            options: {
33              sourceMap: true,
34            }
35          }
36        ],
37      },
38    ],
39  }
40};
41

エラーメッセージ

Error
1Error: PostCSS plugin css-declaration-sorter requires PostCSS 8.

”Migration guide”

PlainText
1Migration guide for end-users:
2https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
3    at Processor.normalize ([Path]/sass-postcss/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:167:15)
4    at new Processor ([Path]/sass-postcss/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
5    at postcss ([Path]/sass-postcss/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
6    at [Path]/sass-postcss/node_modules/postcss-loader/src/index.js:140:12

すでに "postcss": "8.2.4"とインストールできていますし、これはどういう対処をすべきでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

環境や設定等を丁寧に載せておられたので、自分も試してみました。
以下のようにしたら動きましたので、参考までに載せておきます。
まずエラーメッセージに記載されているサイトどおりで、postcss-loaderも古いと思われます。
postcss-loaderの最新は5が出ているようですが、以下の書き方では4系でしか動かないようです。（別のエラーが出ます。何か方法があるのでしょう。）
また上げた時にpostcss-loaderのopttionの記述も変えなくてはならないようです。（以下のpostcssOptionsと書いてあるあたりです。）

package.json

{
  "main": "index.js",
  "private": true,
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "css-declaration-sorter": "6.0.2",
    "css-loader": "^3.4.2",
    "postcss": "8.2.4",
    "postcss-loader": "^4.0.3",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {}
}

webpack.config.json

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /.scss/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              importLoaders: 2
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              postcssOptions: {
                plugins: [
                  require('autoprefixer')({
                    grid: true
                  }),
                  require('css-declaration-sorter')({
                    order: 'alphabetical'
                  }),
                ]
              },
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            }
          }
        ],
      },
    ],
  }
};

投稿2021/02/06 05:30