这篇文章主要介绍了webpack3中如何给CSS3样式添加浏览器兼容的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇webpack3中如何给CSS3样式添加浏览器兼容文章都会有所收获，下面我们一起来看看吧。
1.在webpack中需要处理css必须先安装如下两个loader
npm install --save-dev css-loader style-loader
2.要处理sass和添加浏览器前缀需要下载如下插件和loader
//sass-loader依赖于node-sass，所以还要安装node-sass//postcss-loader autoprefixer postcss 处理浏览器兼容
npm install --save-dev sass-loader node-sass postcss-loader autoprefixer postcss
3.webpack中配置如下所示
这是官网提供的例子完全可以使用，没必须要在单独建立一个配置文件
点击进入官网地址
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
‘style-loader‘，
{loader: ‘css-loader‘，options: {importLoaders: 2}}, //2代表css-loader后还需要几个loader
{loader: ‘postcss-loader‘，options:{plugins:[require（"autoprefixer"）（"last 100 versions"）]}},
‘sass-loader‘
]
}
关于“webpack3中如何给CSS3样式添加浏览器兼容”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“webpack3中如何给CSS3样式添加浏览器兼容”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
