next.js + Webpack + CSS => 语法错误：意外的令牌。(点) = 如何修复？

Question

我是webpack和next.js的新手。我收到以下错误，webpack似乎无法正确理解/解析/加载CSS文件。

C:[e-mail]: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:[e-mail]: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:[e-mail]: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:[e-mail]: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/nod_module/@patternfly/react styles/css/components/Backdrop/backrop.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/nod_module/@patternfly/react styles/css/components/Backdrop/backrop.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

由于next为ssr&客户端它有两个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.