postcss.config.js
3.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
'use strict';
/**
* postcss plugins for both dev and pro
* @parem et Symbol
*/
const psprites = require('postcss-sprites');
const path = require('path');
const config = require('../../package.json');
const distDir = path.join(__dirname, `../dist/${config.name}/${config.version}`);
const dist = {
img: distDir + '/img',
font: distDir + '/font'
}
exports.postcssPlugin = (et) => {
let sprites = {
spritesmith: {
padding: 8
},
filterBy(file) {
// base64 的图片没有 url 过滤掉
if (file.url) {
return Promise.resolve();
}
return Promise.reject();
},
groupBy(file) {
let group = file.url.split('/')[1];
let entry = path.basename(file.styleFilePath);
file.retina = true;
file.radio = 2;
if (group) {
group = entry + '.' + group;
}
return group ? Promise.resolve(group) : Promise.reject('yoho');
},
hooks: {
onUpdateRule:function(rule, comment, image){
image.spriteUrl += ("?t=" + new Date().getTime());
psprites.updateRule(rule, comment, image);
}
}
},
assets,
plugins;
// assets & sprites config in both dev and pro
if (et === 'pro') {
assets = {
loadPaths: [dist.img, dist.font],
relativeTo: distDir,
cachebuster: true
};
Object.assign(sprites, {
basePath: dist.img,
stylesheetPath: distDir,
spritePath: dist.img
});
} else if (et === 'dev') {
assets = {
loadPaths: [path.join(__dirname, '../img/'), path.join(__dirname, '../font/')],
relativeTo: path.join(__dirname, './bundle')
};
Object.assign(sprites, {
basePath: path.join(__dirname, '../img/'),
stylesheetPath: path.join(__dirname, './bundle'),
spritePath: path.join(__dirname, './bundle')
});
}
plugins = [
require('postcss-import')({
path: [path.join(__dirname, '../scss')],
resolve(id) {
let name = path.basename(id);
if (!/^_/.test(name)) {
id = path.dirname(id) + '/_' + name;
}
return id;
}
}),
require('precss'),
psprites.default(sprites),
require('postcss-assets')(assets),
require('postcss-calc'),
require('postcss-pxtorem')({
rootValue: 40,
unitPrecision: 5, // 保留5位小数字
minPixelValue: 2, // 小于 2 时,不转换
selectorBlackList: [], // 选择器黑名单,可以使用正则
propWhiteList: [] // 属性名称为空,表示替换所有属性的值
}),
require('autoprefixer')({
browsers: ['> 1%']
}),
// 可选
require('postcss-use')({
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
})
];
if (et === 'pro') {
plugins.push(require('cssnano')({
safe: true
}));
}
return plugins;
};