连踩两次 css-loader 的坑,我悟了……

admin 2022年4月25日03:01:22安全开发评论8 views2005字阅读6分41秒阅读模式

css-loader 我真记住你了!

问题描述

准备自己搭一套前端框架,一路都很顺,当遇到 [email protected] 去加载样式文件的时候,打包出来之后出现了一些莫名巧妙的文件(我是准备去修改 element-ui 库的主题样式的)。
入口文件 (element-variables.scss):


/* 改变主题色变量 */
$--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()
一切看着似乎都很正常。
打包编译后:

连踩两次 css-loader 的坑,我悟了……

可以看到,默默奇妙多出了两个文件,我们打开其中一个 c463e35f54ccf5b09110.ttf 看看:

export default __webpack_public_path__ + "fonts/element-icons.ttf";

可以看到,直接导出了一个模块,内容是拼的一个 url 链接。
这是什么鬼呢?赶紧翻开 css-loader 源码。

原因

[email protected] 默认是开启了 esModule: true 标识,当 esModuletrue 的时候,css-loader 是不会帮你去 resolve 整个 url 的,所以最后给到 webpack 默认 loader 的时候 url 还是 ~element-ui/packages/theme-chalk/src/indexwebpack 是不认识这玩意的,不知道它具体是啥,所以直接输出了一个 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 的坑,我悟了……想了解更多编程,欢迎加入蓝桥云课专属代码交流群连踩两次 css-loader 的坑,我悟了……

连踩两次 css-loader 的坑,我悟了……


原文始发于微信公众号(蓝桥云课精选):连踩两次 css-loader 的坑,我悟了……

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年4月25日03:01:22
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  连踩两次 css-loader 的坑,我悟了…… http://cn-sec.com/archives/939342.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: