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

从下一个为 ssr 和客户端提供解决方案的事实来看，它具有2个webpack配置，每个配置一个。

与其自行配置，不如使用官方（暂时）插件@zeit/next-css。

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