next.js + Webpack + CSS => SyntaxError: Неожиданный токен. (точка) = как исправить? - PullRequest
Новая
       60

next.js + Webpack + CSS => SyntaxError: Неожиданный токен. (точка) = как исправить?

0 голосов
/ 25 октября 2019

Я новичок в 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

файла: /// 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

: /// C: / devtmp / workspaces / nextjs / web-admin / node_modules / @ patternfly / реагировать-styles / css / components / Backdrop / background.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"]
    });
...

Большое спасибо!

1 Ответ

1 голос
/ 26 октября 2019

В связи с тем, что в следующем предложении есть решение для ssr & на стороне клиента , у него есть 2 конфигурации веб-пакетов, по одному для каждой.

Вместо того, чтобы конфигурировать егоДля себя лучше использовать официальный (пока что) плагин @zeit/next-css.

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