将css文件作为webpack的原始文件导入

问题描述 投票:0回答:1

我将此作为我的Webpack配置的一部分

 {
    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'

如何解决此错误?

javascript webpack ecmascript-6
1个回答
0
投票

您需要安装raw-loader才能使用原始文件。

如果这是一次导入,则无需更改webpack的配置,并内联应用加载程序。

raw-loader

♥️请注意到双!!,它们指示将webpack打包为not在此导入上应用常规的(基于配置的)装载程序。

© www.soinside.com 2019 - 2024. All rights reserved.