next.js + Webpack + CSS => SyntaxError:意外令牌。如何修理？

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"]
    });
...

非常感谢！

Answer 1

事实上，接下来为&客户端提供了一个解决方案，它有2个webpack倾诉，每个都有一个。

与其自己配置它，不如使用正式的插件@zeit/next-css (目前)。

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

警告编辑: 06-07-2021

This package has been deprecated
Author message:

Next.js now has built-in support for CSS: https://nextjs.org/docs/basic-features/built-in-css-support. The built-in support solves many bugs and painpoints that the next-css plugin had.