详解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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
详解js前端代码异常监控
Jan 11 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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 smarty函数扩展
2010/03/15 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
深入理解python多进程编程
2016/06/12 Python
python方向键控制上下左右代码
2018/01/20 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
毕业生的求职信范文分享
2013/12/04 职场文书
经济管理专业自荐信
2013/12/30 职场文书
春节晚会主持词
2014/03/24 职场文书
安全宣传标语口号
2014/06/06 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers