手把手教你webpack3(11)PostCSS-Loader配置简述
来源:互联网 发布:mac常用办公软件 编辑:程序博客网 时间:2024/05/17 20:12
POSTCSS-LOADER配置简述
前注:
文档全文请查看 根目录的文档说明。
如果可以,请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里,发【Issues】。
DEMO地址
1、概述
postcss-loader
用于处理css代码,具有下列特点:
- 通常由
options
和plugins
两部分组成,plugins
虽然嵌套在options
里,但实际上是通过其他插件生效的; - 配置是可以独立的(每个配置的插件也是独立的)。详细介绍阅读【2.1】;
还有一些自定义配置,但由于篇幅所限,这里就不像之前那样详解每个配置了(主要是很多都依赖于其他东西)。
只写一些常用功能。
2、配置
2.1、独立配置
所谓独立配置,指的是在js文件中,引入的css文件如何被postcss-loader
解析,取决于和他最近的那一个postcss的设置文件。
注:
对在css文件中,通过@import
导入的css文件无效:
- 必须是通过通过
import
引入到js里面的css文件,才会被postcss-loader
解析生效; - 如果是
a.css
,通过@import './b.css'
引入b.css
文件,那么该配置对a.css
生效,对b.css
无效; - 我查了很多资料,目前没找到能让
postcss-loader
对在css文件中,通过@import
方式导入其他的css文件,进行生效的方法。如果有,请提 issues 给我。
优先级:
- 在
webpack.config.js
中的module.rules
属性里设置的优先级最高; - 然后按顺序找,离css文件最近的
postcss.config.js
配置文件,遇见的第一个文件其次; - 按顺序找的后面的文件优先级最低;
- 找不到配置会报错;
注(完)
先假设 webpack.config.js
里配置方式如下(无任何特殊配置):
// ...略略略{ test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ]} // ...略略略
简单来说,postcss-loader
的配置文件名为:postcss.config.js
。
假设文件树结构如下:
.|____app.js|____webpack.config.js|____index.html|____postcss.config.js // 1#设置文件|____style| |____postcss.config.js // 2#设置文件| |____style.css|____style2| |____bar.css| |____postcss.config.js // 3#设置文件
引用(import
)结构是:
app.js
->style/style.css
app.js
->style2/bar.css
假如两个css文件都有一条css属性:box-sizing: border-box;
;
然后 style/postcss.config.js
(2#)的设置如下(兼容性配置):
module.exports = { plugins: [ require('autoprefixer')({ browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 0.01%" ] }) ]}
style2/postcss.config.js
(3#)的设置如下(默认配置):
module.exports = {}
经过postcss-loader
的处理之后,有兼容性配置的css文件,其插入html文件后,css属性变为如下:
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
无兼容性配置的css文件,其插入html文件后,css属性变为如下:
box-sizing: border-box;
说明一点,对于postcss-loader
来说,他优先取同目录下的postcss.config.js
的配置属性。
另外,由于2#和3#设置文件的存在,因此无论1#如何设置,都不会影响其效果。
假如css文件找不到同目录下的postcss.config.js
文件,那么会依次往上级目录寻找,直到找到,或者抵达项目根目录为止(以上面这个目录结构为例,即webpack.config.js
所在目录是根目录)
2.2、自定义配置文件路径
名称 类型 默认值 描述 config {Object} undefined Set postcss.config.js config path && ctx在上面,我们写了postcss-loader
的配置文件的使用方式,分别是:【写在webpack.config.js
中】,【配置文件放在对应的css文件的同级目录或者上级目录】。
但是假如我们需要统一管理 postcss-loader
的配置文件,那么就需要通过 config
来处理。
示例代码如下:
{ loader: 'postcss-loader', options: { config: { path: './config' // 写到目录即可,文件名强制要求是postcss.config.js } }}
表示会去 webpack.config.js
的同目录下去找文件夹 config
,然后在该文件夹下找到 postcss.config.js
文件(文件名不能改变),从而读取配置。
假如这么写,会导致【放在对应的css文件,的同级目录或者上级目录,的postcss-loader
的配置文件失效】。原因是优先级问题。
除此之外,还有一个context
设置,略略略。
2.3、sourceMap
测试后,无效(开启与否文件大小不变)
3、插件
除了 autoprefixer
用于加兼容性前缀,其他基本都有更好的,比如stylelint
不如用eslint
系列替代。
3.1、autoprefixer
这个是最应该添加的插件了。
效果是对css文件添加兼容性前缀。
安装:
npm install autoprefixer --save
官方github地址:
https://github.com/postcss/autoprefixer
使用方式:
// postcss.config.jslet autoprefixer = require('autoprefixer');module.exports = { plugins: [ autoprefixer({ browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 0.01%" ] }) ]}
效果:
应该是兼容性最强的配置方法了,例如box-sizing
可以添加两个前缀,有些特性可以添加三个前缀,如下:
转换前
transform: rotate(0deg);
转换后:
-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
名称 类型 默认值 描述 其他特性:
不仅可以添加前缀,也可以删除旧前缀(过时前缀)等。详细查看官方文档。
非特殊要求,直接使用上面这个配置就行了(如果不需要最多的前缀,可以把上面的改为
autoprefixer({ browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 1%" ] })
3、参考文章
PostCSS配置指北
- 手把手教你webpack3(11)PostCSS-Loader配置简述
- 手把手教你webpack3(8)url-Loader配置简述
- 手把手教你webpack3(9)File-Loader配置简述
- 手把手教你webpack3(10)Less-Loader配置简述
- 手把手教你webpack3(5)babel-loader详细使用说明
- 手把手教你webpack3(6)css-loader详细使用说明
- 手把手教你webpack3(7)style-loader详细使用说明
- postcss webpack3.0配置
- webpack3.0----postcss-loader的使用
- 手把手教你webpack3(4)出口(详解)
- webpack3.0问题系列 ——postcss-loader的使用
- webpack postcss-loader autoprefixer 配置
- 手把手教你webpack3(2)简单指令(npm脚本)
- 手把手教你webpack3(3)入口(多入口)entry
- 手把手教你webpack3(1)最简单的webpack实例
- Webpack3+postcss+sass+css自动添加前缀配置
- webpack3最新版本配置研究(一)loader
- webpack3最新版本配置研究(二)loader
- [李超线段树] BZOJ3165 [Heoi2013]. Segment
- spring-boot打包,引入外部jar包问题
- 双系统中删除linux(win7适用)
- 最短网络
- LeetCode Union-Find(并查集) 专题(二)
- 手把手教你webpack3(11)PostCSS-Loader配置简述
- Jquery Ajax
- Hadoop生态系统(1)
- 菜鸟编程 指针初步
- java反射机制在Spring IOC中的应用
- JAVA 模板设计模式和单例设计模式
- 牛顿迭代法 一元非线性方程求根 C语言实现
- 微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的关系及正确使用
- iOS 常用组件-高效切圆角方法总结