详解webpack之scss和postcss-loader的配置


Posted in Javascript onJanuary 09, 2018

本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下:

开始

npm i sass-loader node-sass postcss-loader autoprefixer

首先配置postcss-loader

在这里postcss是为了来给浏览器内核添加私有前缀。当前postcss还有其他操作比如px2rem之类的。可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件。

/**** package.json ****/
// 指定你的前缀的兼容版本。
// 目前指定的只添加-webkit-, -ms-
// 你也可以兼容更低或者更高的的浏览器来增加或减少内核前缀的数量。
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]
/**** .postcssrc.js ****/
// 增加一个.postcssrc.js来指定postcss所使用的插件。就跟.babelrc类似
module.exports = {
 plugins:{
  "autoprefixer": {}
 }
}
/**** build.js生产环境 ****/
{
   test: /\.css$/,
   use: ExtractTextWebpackPlugin.extract({
   fallback: 'style-loader',
-    use: 'css-loader'
+    use: ['css-loader', 'postcss-loader', 'sass-loader']
   })
 }
/**** dev.js开发环境 ****/
// 其实个人认为在开发环境可加可不加
{
   test: /\.css$/,
   use: ['style-loader', 'css-loader', 'postcss-loader']
},

scss的配置

无非就是增加规则

/**** build.js ****/
{
  test: /\.scss$/,
  use: ExtractTextWebpackPlugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'postcss-loader', 'sass-loader']
  })
}
/**** dev.js ****/
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}

github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
js a标签点击事件
Mar 30 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
JS的深浅复制详细
Oct 16 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 #Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 #Javascript
详解webpack babel的配置
Jan 09 #Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 #Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 #Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 #Javascript
You might like
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
axios基本入门用法教程
2017/03/25 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
商务英语专业自荐信
2013/10/14 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
学生手册评语
2014/05/05 职场文书
高一新生军训方案
2014/05/12 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android