美文网首页webpack学习
解决使用postcss-loader不生效问题

解决使用postcss-loader不生效问题

作者: 景元合 | 来源:发表于2020-03-28 17:43 被阅读0次

    前言

    今天使用postcss-loader时候,发现在浏览器使用postcss-loader解决css3兼容性问题时候,一直没生效,google了一下是因为没设置浏览器版本,在此特意记录一下。

    安装

    yarn add postcss-loader autoprefixer --dev
    

    配置webpack.config.js

    {
        test:/\.scss/,
        use:['style-loader',{
            loader:'css-loader',
            options:{
                modules:true,
                importLoaders:2
                }
            },
            'sass-loader',
            'postcss-loader'
            ]
    }
    

    根目录创建postcss.config.js

    就是因为这里没有配置支持的浏览器版本才没有生效

    module.exports = {
        plugins:[
            require("autoprefixer")({
                overrideBrowserslist:[
                    "defaults",
                    "Android 4.1",
                    "iOS 7.1",
                    "Chrome>31",
                    "ff>31",
                    "ie>=8",
                    "last 2 versions",
                    ">0%"
                ]
            })
        ]
    }
    

    相关文章

      网友评论

        本文标题:解决使用postcss-loader不生效问题

        本文链接:https://www.haomeiwen.com/subject/gojsuhtx.html