импорт файла CSS в виде необработанного файла для веб-пакета

Question

У меня есть это как часть конфигурации моего веб-пакета

 {
    test: /\.css$/,
    oneOf: [
      {
        resourceQuery: /^\?raw$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        use: [
          // When using SSR, we use the mini css extract plugin so that we don't get FOUC in the
          // server rendered page. Also, the cache-loader does not work well with the plugin, so
          // only use the cache loader when not using SSR.
          ...(process.env.USE_SSR === 'true'
            ? [MiniCssExtractPlugin.loader]
            : [
                {
                  loader: 'cache-loader',
                },
                'style-loader',
              ]),
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              minimize: true,
              localIdentName: '[folder]--[name]--[local]--[hash:base64:2]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: path.resolve(root, 'buildTools/webpack'),
              },
            },
          },
        ],
      },
    ],
  },

, и я импортировал файл типа

@import '../../../@next/init/cloud/cloudChat.css?raw';

Я получаю сообщение об ошибке

Ошибка: ошибканайти '!! raw! ../../../@ next / init / cloud / cloudChat.css? raw'

Как исправить эту ошибку?

Answer 1

Вам необходимо установить raw-loader, чтобы использовать raw.

Если это однократный импорт, вам не нужно изменять конфигурацию webpack и применять загрузчикinline.

import css from '!!raw-loader!../../../@next/init/cloud/cloudChat.css';

♥ ️ Обратите внимание на двойной !! , они указывают, что веб-пакет для не применяется регулярно (на основе конфигурации)загрузчики по этому импорту.