postcss-loader 失效的原因
项目场景
很久之前在 webpack
中使用 postcss-loader
遇到了失效的问题。
最近刚好也遇到了,顺便将解决方案以及出现问题的原因做一个记录。
问题描述
首先,在平时的开发中,我们会对一些 css
文件进行处理,比如添加前缀、排序等。
那我们最常见的一段代码如下:
/* reset.css */
@charset "utf-8";
* {
transition: all 0.3s;
user-select: none;
}
// webpack.config.js
module.exports = {
// ......
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
}
}
正常打包后,出现的 css 代码一般会长成如下这样
* {
transition: all 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
异常情况
但是天有不测风云,如果当前 css
文件通过 @import
语法导入了另一个 css 文件,这时再去打包就会发现,postcss
失效了。
比如,在 index.css
文件中导入 reset.css
,然后对 index.css
进行打包
/* index.css */
@charset "utf-8";
@import 'reset.css';
打包后的结果如下
是的,长得和源文件一模一样。
原因分析
要分析产生这个问题的原因,必须要知道 loader 执行的顺序以及每个 loader 大概要做的事情。
过程分析
1、首先,webpack
通过入口文件开始爬文件进行打包,此时会识别到文件对 index.css
有依赖。由于配置过关于 css 文件的 loader
使用规则,index.css
首先会被交给 postcss-loader
进行处理
2、当 postcss-loader
在对 css 进行处理时,它主要功能是将 css 文件内的 css 代码
进行处理,而不会执行 css 文件内部的代码。也就是说,css 文件中的 @import
语法,此时并不会执行。
3、postcss-loader
处理完成后,会将已经具备兼容性前缀的 css 代码再交给 css-loader
进行处理。此时,文件中的 @import
就被执行了,reset.css
中的代码开始进入 index.css
。
但很可惜,这一步已经晚了,因为 postcss-loader
已经下班了。换句话说,默认情况下,loader
的执行顺序是单向的,index.css
文件已经被 postcss-loader
处理完毕,不会回头再去处理一遍。
4、css-loader
执行完毕,再交给 style-loader
进行样式注入。
原因
根据以上对执行过程的分析,其实可以发现,导致这个问题产生的原因是:
- css 文件中的
@import
语法,在postcss-loader
处理时并不会执行 loader
不会逆向进行处理
解决方案
总结:使用
importLoaders
属性将文件再交给postcss-loader
处理
module.exports = {
// ......
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
}
]
}
}
importLoaders
的意思是,如果在这个 css 文件中有 @import
进来的文件,那这些文件将交给前 n
个 loader
进行处理。
此处我们需要将新文件交给前一个 loader ,也就是 postcss-loader
来处理,所以它的值为 1
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfebajf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24