webpack 的 css-loader style-loader 无法处理 require.context() ?

oansujhm
  • 4
新手上路,请多包涵

我已经在 config 里面配置了css-loader style-loader。

如果在 index.ts 里使用 require 的形式引入 css,那么打包之后样式可以成功渲染在页面上,但如果我使用 require.context() 批量引入 css,那么页面的样式就不会被正确渲染。

之前有三个猜测:

  1. require.context() 不好用。经过测试,使用 file-loader 可已将通过 require.context() 引入的图片打包。
  2. 引入 css 的时候只能引入一个文件作为入口。经过测试,连续 require 两个 css 文件也能成功渲染。
  3. require.context() 参数输入有问题。经过测试,如果将 css 改为使用 file-loader 打包,所有文件都会被识别并打包,所以 require.context() 获取也没问题。

万策尽矣,实在想不通了。

// require('./static/css/index.css');
// require('./static/css/copy.css');
require.context('./static/css/', true, /\.css$/)
require.context('./static/resource/img/', true, /\.(webp|jpg|png)$/)

import main from './script/main'
main.init();
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.(webp|jpg|png)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'img/'
          }
        },
        exclude: /node_modules/
      }
回复
阅读 261
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏