webpack配置css浏览器前缀

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://www.cnblogs.com/Mrrabbit/p/11202631.html

时间: 2024-11-05 22:40:49

webpack配置css浏览器前缀的相关文章

CSS浏览器前缀,HTML5新增标签

1.浏览器样式前缀 为了让CSS3样式兼容,需要加上 例如:-ms- 兼容IE浏览器-moz 兼容Firefox-webkit- 兼容chrome和safaridiv{-ms-transform:rotate(30deg);...........} 2.自动添加浏览器前缀 目前的状态是,有些CSS3属性需要加前缀,有些不需要加,有些只需加部分,可以用插件,安装autoprefixer 3.HTML5新增标签 (1)<header> 页面头部.页眉(2)<nav>页面导航(3)<

webpack4 css添加浏览器前缀 postcss-loader

自动添加浏览器前缀 ,我们这里使用postcss-loader 首先  cnpm install --save-dev postcss-loader autoprefixer 我这里用的cnpm ,npm也可以下载 接下来是配置 在网上查了相关文档发现需要新建一个 postcss.config.js 文件来对 postcss-loader 配置. 第一种配置: 新建与 webpack.config.js 同级的 postcss.config.js 文件 module.exports = { pl

webpack通过postcss-loader添加浏览器前缀

在webpack中,我们可以很方便的使用autoprefixer来为css3属性添加不同的浏览器前缀. 首先,需要安装autoprefixer不用多说了,其次是安装postcss-loader(npm install --save-dev postcss-loader) 接下来在webpack.config.js文件里添加如下代码(红圈部分): 接下来,在webpack.config.js的同级目录下新建postcss.config.js文件,配置如下: module.exports = { p

CSS变量和浏览器前缀

一.CSS变量 CSS变量是CSS的新特性,大多数浏览器都实现了这个功能,使用CSS变量有利代码复用,而且当我们修改变量值时,所有引用该变量的属性都会发生改变. 定义变量后可以有两种使用方法,第一种时var(var_name),第二种时var(var_name,defaultvalue);当变量不存在时使用默认值. 二.浏览器前缀 实现浏览器前缀可以让我们使用新的属性,且不行影响该属性成为标准后的效果.不同的浏览器的前缀不一样. .container { display: -webkit-box

浏览器内核及css中前缀

1.css中前缀: (1) -moz       内核: Gecko内核    浏览器: Firefox , Netscape(6-9) (2) -ms         内核:Trident       浏览器: IE , 世界之窗 , 360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blink) , 搜狗浏览器(1.x为Trident,2.0及以后版本为Trident+Webkit) ,腾讯TT , 2345浏览器 (3) -we

Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器

Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里. 你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以忘记CSS前缀了,按照最新的W3C标准尽情书写无前缀的CSS,像这样: a { transition: transform 1s } Autoprefixer使用一个浏览器流行度和属性支持度的数据库来给你的CSS添加前缀. a { -webkit-transition: -webkit-transf

使用scss为css样式自动添加浏览器前缀

当一个浏览器实现一个新的属性.值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别. 浏览器使用前缀来尝试一些新属性.值和选择器,即使他们还没有最终定稿--这是一个好的测试方法,在必要时也可以对他们进行修正或者重新定义.如果浏览器一上来就直接使用标准属性,那他们就会被直接锁定在这个特征的实现上而不易变更. 开发这可能会立即使用无前缀的属性,而且也会一直期望它能够保持同样的表现不再变更.如果浏览器在之后对这个属性做了变更,不管是由于它的实现存在

webpack 配置之入门二(css 篇)

在项目中我们通过 css 来美化页面,css 也成为了网站不可或缺的一部分,这章节主要介绍 webpack 处理 css 部分, 1.webpack 处理 css 在 webpack 中,我们通过 style-loader 与 css-loader 来处理 css,而 style-loader 与 css-loader 是不同的,style-loader 是在 html 中创建一个标签来导入 css 的,而 css-loader 是将 css 模块导入到 js 中.首先我们通过 npm 来引入这

webpack配置这一篇就够

最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/42e11515c10f git项目地址:https://github.com/gengchen528/webpackSample 更多前端内容可以到:http://www.bloggeng.com/ 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的