Почему эта конфигурация webpack css-loader style-loader все еще не может интерпретировать встроенный импорт CSS

Question

Мне нужно импортировать файлы .css в моем приложении React на стороне сервера.Я настроил файл Webpack для использования, как мне кажется, подходящих загрузчиков, однако я все еще получаю следующую ошибку SyntaxError:

~/.../node_modules/rc-slider/assets/index.css:1
(function (exports, require, module, __filename, __dirname) { .rc-slider {
                                                              ^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.rc-slider/assets/index.css (/Users/roberthunter/DEV/AMNE/website-6.0/build/webpack:/external "rc-slider/assets/index.css":1:1)

Я ознакомился с несколькими руководствами, включая настройку Webpack для MiniCssExtractPlugin

https://webpack.js.org/plugins/mini-css-extract-plugin/#root

Кажется, что следующий вопрос решает мою проблему, но решение не работает для меня.

Webpack css-loader не импортирует CSS

Я также сослался на следующее, чтобы понять, как на самом деле работают css-loader и style-loader

Webpack style-loader против css-loader

Я пробовал много вариантов выше, включая импорт CSS с встроенными загрузчиками.Пример:

import SliderCSS from 'style-loader!css-loader!rc-slider/assets/index.css';

Вот мои следующие соответствующие фрагменты кода.

webpack.confing.js (для клиентского приложения)

// ...imports above

module.exports = {
  mode: dev ? "development" : "production",
  // context: path.join(__dirname, "src"),
  devtool: !dev ? "none" : "source-map",
  entry: {
    vendor: ["styled-components"],
    webflow: ["./src/app/webflow.js"],
    app: ["@babel/polyfill/noConflict", "./src/app/react.js"],
    wscripts: ["@babel/polyfill/noConflict", "./src/webflow-scripts/index.js"],
  },
  resolve: {
    modules: [
      path.resolve("./"),
      "node_modules",
    ],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          }
        }
      },
      {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        use: [
          MiniCSSExtractPugin.loader,
          // 'style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
        loader: 'file-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        loaders: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            query: {
              progressive: true,
              optimizationLevel: 7,
              interlaced: false,
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
  },
  plugins: [
    new MiniCSSExtractPugin(),
    new webpack.ProvidePlugin({
      "React": "react"
    }),
    new webpack.DefinePlugin({
      'process.env.IS_BROWSER_SIDE': JSON.stringify(true),  // Used to determine if code is rendering on the client or the server.
      'process.env.NODE_ENV': JSON.stringify(true),  // Used to determine if code is rendering on the client or the server.
    }),
  ]
};

webpack.server.config.js (для сервера веб-упаковки)

// ...imports above

module.exports = {
  mode: dev ? "development" : "production",
  // context: path.join(__dirname, "src"),
  devtool: !dev ? "none" : "source-map",
  entry: {
    server: ["@babel/polyfill/noConflict", "./src/server/server.js"],
  },
  resolve: {
    modules: [
      path.resolve("./"),
      "node_modules",
    ],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          }
        }
      },
      {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        use: [
          MiniCSSExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [MiniCSSExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
        loader: 'file-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        loaders: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            query: {
              progressive: true,
              optimizationLevel: 7,
              interlaced: false,
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].bundle.js",
  },
  plugins: [
    new WebpackSourceMapSupport(),
    new webpack.ProvidePlugin({
      "React": "react"
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(true),  // Used to determine if code is rendering on the client or the server.
    }),
    new MiniCSSExtractPlugin(),
  ],
  target: 'node',
  node: {
    __dirname: false,
  },
  externals: [nodeExternals()],
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-styled-components",
    ["css-modules-transform", {
      "extensions": [".css"],
      "keepImport": true,
    }],
  ],
}

package.json (сценарии)

  "scripts": {
    "build:dev": "webpack --config webpack.config.js --progress --watch",
    "build:server:dev": "webpack --config webpack.server.config.js --progress --watch",
    "start": "npm-run-all --parallel build:dev build:server:dev server:dev-webpack",
    "server:dev-webpack": "nodemon build/server.bundle.js",

При текущей настройке яЯ ожидаю, что модули .css, которые я импортирую, будут проанализированы и добавлены в каталог /dist вместе с моими другими активами, упакованными в Интернет, чтобы они могли надлежащим образом обслуживаться сервером экспресс-доставки, код которого упакован в каталог /build.Однако добавление строки в моем приложении к import '.../../some.css вызывает синтаксическую ошибку.

Также я знаю, что существуют шаблоны, которые упрощают рендеринг на стороне сервера.Я попробовал Next.js, однако он был слишком самоуверенным, чтобы удовлетворить мои потребности (предлагая статически сгенерированный html от стороннего веб-разработчика).Я не совсем новичок в вебпаке, однако я не очень хорошо разбираюсь в его внутренней работе, поэтому любые дополнительные указания, помощь или предложения приветствуются.