css-loader 我真记住你了！

问题描述

/* 改变主题色变量 */
$--color-primary: #409EFF;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

webpack 配置文件：

.rule('css')
            .test(/.css$/) // sass 和 scss 文件
            .use('extract-loader') // 提取 css 样式到单独 css 文件
                .loader(require('mini-css-extract-plugin').loader)
                .end()
            .use('css-loader') // 加载 css 模块
                .loader('css-loader')
                .end()
            .end()

一切看着似乎都很正常。
打包编译后：


可以看到，默默奇妙多出了两个文件，我们打开其中一个 c463e35f54ccf5b09110.ttf 看看：
export default __webpack_public_path__ + "fonts/element-icons.ttf";
可以看到，直接导出了一个模块，内容是拼的一个 url 链接。
这是什么鬼呢？赶紧翻开 css-loader 源码。
原因
[email protected] 默认是开启了 esModule: true 标识，当 esModule 为 true 的时候，css-loader 是不会帮你去 resolve 整个 url 的，所以最后给到 webpack 默认 loader 的时候 url 还是 ~element-ui/packages/theme-chalk/src/index。webpack 是不认识这玩意的，不知道它具体是啥，所以直接输出了一个 c463e35f54ccf5b09110.ttf 文件，然后里面用 __webpack_public_path__ + "fonts/element-icons.woff"; 去替代，而 __webpack_public_path__ + "fonts/element-icons.woff"; 内容又是从哪来的呢？这个来自 url-loader。
是的！事实就是这么回事～
那我们该怎么解决呢？
错误源码位置
xxx/node_modules/css-loader/dist/plugins/postcss-url-parser.js：

const {
              needToResolveURL,
              rootContext
            } = options;
            const request = (0, _utils.requestify)(pathname, rootContext, needToResolveURL);
// 当 esModule 为 true 的时候，css-loader 不会去 resolve url
            if (!needToResolveURL) {
              // eslint-disable-next-line consistent-return
              return { ...parsedDeclaration,
                url: request,
                hash
              };
            }


知道原因后就好解决了。
解决方式
1.把路径改为 webpack 认识的绝对路径：

/* 改变主题色变量 */
$--color-primary: #409EFF;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '/Users/xxx/xxx/node_modules/element-ui/packages/theme-chalk/src/fonts';

@import "~element-ui/packages/theme-chalk/src/index";



2.修改 css-loader 的配置，把 esModule 禁掉：

.use('css-loader') // 加载 css 模块
  .loader('css-loader')
  .options({
    url: true,
    esModule: false
  })

上一个坑
css-loader导致vue中样式失效（坑坑坑！！）
坑我已经帮你们踩了，大家别再掉进去了（我已经踩了两次了😂）。


想了解更多编程，欢迎加入蓝桥云课专属代码交流群








原文始发于微信公众号（蓝桥云课精选）：连踩两次 css-loader 的坑，我悟了……