postcss.config.js 2.65 KB
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}`, // 生成后的cssurl地址
    };
} 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: [], // 选择器黑名单,可以使用正则
            propWhiteList: [] // 属性名称为空,表示替换所有属性的值
        },
        'postcss-use': {
            modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
        },
        autoprefixer: {
            browsers: ['> 1%', 'android >=4', 'ios >=8']
        }
    }
};