postcss.config.js
2.67 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
let scss = require('postcss-scss');
let path = require('path');
const pkg = require('./package.json');
const devInfo = require('./public/build/dev-info.js');
let assets, sprites;
if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'performance') {
assets = {
loadPaths: [path.join(__dirname, './public/img/'), path.join(__dirname, './public/font/')],
basePath: path.join(__dirname, './public/'),
baseUrl: `/${pkg.name}/${pkg.version}`
};
sprites = {
basePath: './public/img/', // 生成前的查找地址
spritePath: `./public/dist/${pkg.name}/${pkg.version}/img`, // 雪碧图生成图片存放地址
stylesheetPath: `./public/dist/${pkg.name}/${pkg.version}`, // 生成后的css中url地址
};
} else {
assets = {
loadPaths: [path.join(__dirname, './public/img/'), path.join(__dirname, './public/font/')],
basePath: path.join(__dirname, './public/'),
baseUrl: devInfo.publicPath
};
sprites = {
basePath: './public/img/', // 生成前的查找地址
spritePath: './public/build/bundle', // 雪碧图生成图片存放地址
stylesheetPath: './public/', // 生成后的css中url地址
};
}
Object.assign(sprites, {
filterBy: function(image) {
if (!/sprite\//.test(image.url)) {
return Promise.reject();
}
return Promise.resolve();
},
groupBy: function(image) {
let query = image.originalUrl.match(/\/([^\/]*)\/([^\.\/]*).[^\.]*$/);
return Promise.resolve(query[1]);
},
padding: 20
});
module.exports = {
parser: scss,
sourceMap: false,
plugins: {
precss: {},
'postcss-import': {
path: [path.join(__dirname, './pubic/scss/')],
resolve(id) {
let name = path.basename(id);
if (!/^_/.test(name)) {
id = path.dirname(id) + '/_' + name;
}
return id;
}
},
'postcss-assets': assets,
'postcss-sprites': sprites,
'postcss-calc': {},
'postcss-pxtorem': {
rootValue: 40,
unitPrecision: 5, // 保留5位小数字
minPixelValue: 2, // 小于 2 时，不转换
selectorBlackList: ['.fix-ios-top'], // 选择器黑名单，可以使用正则
propWhiteList: [] // 属性名称为空，表示替换所有属性的值
},
'postcss-use': {
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
},
autoprefixer: {
browsers: ['> 1%', 'android >=4', 'ios >=8']
}
}
};