webpack配置css浏览器前缀

更新日期: 2019-07-17阅读: 2.4k标签: 浏览器分享

复制链接

新浪微博

QQ 好友

扫一扫分享

webpack打包时，css自动添加浏览器前缀。我们需要用到一个Loader：postcss-loader，和一个插件：autoprefixer

安装

npm i postcss-loader autoprefixer -D

方法一

1.在webpack.config.js文件中，找到module下的rules属性，在里面添加一个对象，完整代码如下：

module:{
        rules:[
            {
                test:/\.scss$/,
                use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘,‘postcss-loader‘]
            }
        ]
    }

代码中，还有另外3个loader，因为use调用loader的顺序是从右往左的，所以顺序不能写错了，webpack打包.scss时，首先会调用postcss-loader为其添加浏览器前缀，(因为我代码中用了sass，所以引入了sass-loader)，当浏览器前缀添加完后，sass-loader会把sass语法转换成css语法，在代码中，一般会有多个css文件，然而css-loader会将css文件整合成一段代码，这时，style-loader就会将这段代码，添加到页面的style标签中。

如果用的普通css，安装下面两个就行：

npm i style-loader css-loader -D

如果用的sass，需要安装如下依赖包：

npm i style-loader css-loader sass-loader node-sass -D

2.在webpack.config.js文件同级目录中，新建postcss.config.js文件，并且添加如下代码：

module.exports = {
    plugins:[
        require(‘autoprefixer‘)
    ]
}

配置完，直接打包运行即可。

方法二

直接把autoprefixer配置在postcss-loader里面

module:{
        rules:[
            {
                test:/\.scss$/,
                use:[
                    {loader:‘style-loader‘},//将css-loader整合在一起的代码，放在页面中的style标签里面
                    {loader:‘css-loader‘},//将各个css文件整合在一起 
                    {loader:‘sass-loader‘},//将sass语法解析成css
                    {
                        loader:‘postcss-loader‘,
                        options:{
                            plugins:[
                                require(‘autoprefixer‘)//postcss-loader会叫autoprefixer插件添加浏览器前缀
                            ]
                        }
                    }
                ]
            }
        ]
    }

style-loader、 css-loader、 sass-loader的更多的用法，可自行去webpack官网查阅文档。这里有个坑，一开始安装的autoprefixer版本是9.x的，但是配置后没有效果，之后换成7.x的就可以了。

链接: https://fly63.com/article/detial/4233

webpack配置css浏览器前缀

浏览器禁用了javascript,各种浏览器如何开启javascript的方法总汇

浏览器的回流与重绘 (Reflow & Repaint)

IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

css重设样式_清除浏览器的默认样式

浏览器访问一个网站所经历的步骤

一个新式的基于文本的浏览器 Browsh

浏览器内核有哪些?主流浏览器的所使用的内核介绍

程序员眼中的浏览器是什么样的?IE:有本事你卸了我啊

精打细算浏览器空闲时间

深入浏览器事件循环的本质