How to correctly load .pcss - postcss files with webpack?

I'm trying, without success so far, to load postcss , .pcss files with webpack

Packages installed :

"postcss": "^8.4.13",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"extract-text-webpack-plugin": "^3.0.2"

 "webpack": "^5.23.0",
 "webpack-bundle-analyzer": "^4.4.0",
 "webpack-cli": "^4.5.0"

In webpack.config.js file :

        {
          test: /\.pcss$/,
          use: [
              //{
                  //loader: 'style-loader',
              //},
              //{
                  //loader: 'css-loader',
                  //options: {
                      //sourceMap: true,
                  //},
              //},
              { // https://github.com/webpack-contrib/postcss-loader#getting-started
                  loader: 'postcss-loader',
                  options: {
                      //config: {
                        //path: `${__dirname}/postcss.config.js`,
                      //},
                      postcssOptions: {
                        plugins: [
                          "postcss-preset-env",
                        ],
                      },
                      //sourceMap: true,
                  },
              },
          ],
        },

But it still says:

ERROR in ./src/assets/css/rssfeeds/app.pcss 9:0
Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| html,
| body,
> #app {
|     min-height: 100vh;
| }

I tried also in this way in webpack.config.js :

const extractPCSS = new ExtractTextPlugin('../css/[name].css');

    {
      test: /\.pcss$/,

      // https://stackoverflow.com/questions/46865384/postcss-with-webpack?rq=1
      use: extractPCSS.extract([ 'css-loader', 'postcss-loader' ])
    }

But I still get this error:

ERROR in ./src/assets/css/rssfeeds/app.pcss 9:0
Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file

The postcss file is:

html,
body,
#app {
    min-height: 100vh;
}

div[role='menu'] {
    outline: none;
}

div[role='menuitem'] {
    outline: none;
}

input:focus {
    outline: none;
}

[role='button']:focus {
    outline: none;
}

[role='menuitemradio']:focus {
    outline: none;
}

.thin-scroll {
    @apply overflow-y-scroll;
}

.thin-scroll::-webkit-scrollbar {
    @apply bg-transparent w-2;
}

.thin-scroll::-webkit-scrollbar-thumb {
    @apply bg-gray-500 rounded-lg border-4 border-transparent bg-clip-content;
}

.rss-item {
    @apply leading-8 text-gray-300 flex items-center justify-between cursor-pointer px-3 py-2;
}

.rss-item.active {
    @apply bg-gray-600;
}

Other info:

node: v16.15.0
O.S.: Ubuntu 20.04 Desktop