javascript - next.js + Webpack + CSS => SyntaxError: Unexpected token . (ドット) = 修正方法は?

Question

私はwebpackとnext.jsが初めてです。次のエラーが表示されます。これは、webpack が CSS ファイルを正しく理解/解析/ロードしていないようです。

C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-styles\css\components\Backdrop\backdrop.css:4
.pf-c-backdrop {
^
SyntaxError: Unexpected token .

これを修正したり、さらにデバッグしたりするにはどうすればよいですか? 私は新しいので、私は完全に迷っています。この問題の原因は何ですか?

詳細:

1.) 完全なスタックトレース:

[ info ]  bundled successfully, waiting for typecheck results ...
[ event ] build page: /test
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results ...
[ ready ] compiled successfully - ready on http://localhost:3000
C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-styles\css\components\Backdrop\backdrop.css:4
.pf-c-backdrop {
^  
SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-styles\css\components\Backdrop\backdrop.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-core\dist\js\components\AboutModal\AboutModal.js:16:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

2.) CSS インポートを行うファイル

file:///C:/devtmp/workspaces/nextjs/web-admin/node_modules/@patternfly/react-styles/css/components/Backdrop/backdrop.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("./backdrop.css");
exports.default = {
    backdrop: 'pf-c-backdrop',
    backdropOpen: 'pf-c-backdrop__open',
    modifiers: {}
};

3.) CSS

file:///C:/devtmp/workspaces/nextjs/web-admin/node_modules/@patternfly/react-styles/css/components/Backdrop/backdrop.css

/* stylelint-enable */
/* stylelint-disable */
/* stylelint-enable */
.pf-c-backdrop {
  --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
  --pf-c-backdrop--Color: var(--pf-global--BackgroundColor--dark-transparent-100);
  --pf-c-backdrop--BackdropFilter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--pf-c-backdrop--ZIndex);
  width: 100%;
  height: 100%;
  background-color: var(--pf-c-backdrop--Color);
  /* stylelint-disable-next-line */
  -webkit-backdrop-filter: var(--pf-c-backdrop--BackdropFilter);
  backdrop-filter: var(--pf-c-backdrop--BackdropFilter); }

.pf-c-backdrop__open {
  overflow: hidden; }

4.) next.config.js の抜粋

module.exports = {

  webpack: (config, options) => {


    config.module.rules.push({
       test: /\.css$/,
        //exclude: ['/node_modules/'],

        include: [
          path.resolve(__dirname, 'pages'),
          path.resolve(__dirname, 'node_modules/patternfly'),
          path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
        ],

        use: ["style-loader", "css-loader"]
    });
...

どうもありがとう！