Web开发中样式(css\less\)的兼容性配置

1. 以Webpack配置文件为例，直接上代码：

const getStyleLoaders = (moreloader) => {
    return [
        "style-loader", //将css-loader解析的样式文件打包成style标签插入到html文件
        "css-loader", //解析css代码
        {
            //处理样式的兼容性问题，针对不同的浏览器增加相应的前缀
            //需要配合package.json中的browserslist来指定兼容范围
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: ["postcss-preset-env"], //postcss的智能预设
                },
            },
        },
        moreloader,
    ].filter(Boolean); //过滤掉数组中undefined元素，如果moreloader没有给出具体参数，就忽略
}

module.exports = {
    entry: " ",
    output: {
        path: ...., 
        filename: "static/js/[name].js", 
        chunkFilename: "static/js/[name].chunk.js", 
        assetModuleFilename: "static/media/[hash:10][ext][query]", 
    },
    module: {
        rules: [
            //处理css
            {
                test: /\.css$/,
                use: getStyleLoaders(),
            },
            {
                test: /\.less$/,
                use: getStyleLoaders("less-loader"),
            },
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders("sass-loader"),
            },
            {
                test: /\.styl$/,
                use: getStyleLoaders("stylus-loader"),
            },
            //处理其他资源
        ]

    },
    plugins: [

    ],
}

以上涉及到的style-loader, css-loader, postcss-loader，postcss-preset-env都要下载

2. 搭配package.json文件中browserslist的设置：指定兼容最近的两个版本∪99%的浏览器∪仍然在支持中的浏览器

"browserslist": [
        "last 2 version", 
        ">1%",
        "not dead"
    ]