当前位置: 首页 > news >正文

webpack.config.js====CSS相关:postcss-loader加载器,自动添加前缀

1. 在webpack中加载css需要先安装style-loader 和 css-loader

 

cnpm install --save-dev style-loader css-loader

 

2. 在webpack中使用postcss自动添加厂商前缀;

cnpm install postcss-loader autoprefixer --save-dev

3. webpack.config.js中使用

 
  

const extractTextWebpackPlugin = require('extract-text-webpack-plugin');
let cssExtract = new extractTextWebpackPlugin({
  filename: 'css/index.css',
  disable: false
});
let sassExtract = new extractTextWebpackPlugin({
  filename: 'css/public.css',
  disable: false
});

       
rules: [
//配置css加载器 { test: /\.css$/, use: cssExtract.extract({ fallback: "style-loader", use: ["css-loader", "postcss-loader"] }) }, //配置sass加载器 { test: /\.scss$/, use: sassExtract.extract({ fallback: 'style-loader', use: ['css-loader', "postcss-loader", 'sass-loader'] }) }, ]

 4. 在根目录下面创建一个postcss.config.js文件,并配置如下

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

 

转载于:https://www.cnblogs.com/songxia/p/10295795.html

相关文章:

  • 【转】Java基础之—反射
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • bugly的flutter版已完成,欢迎使用
  • python之造测试数据-faker(转载)
  • python里能不能用中文
  • Redis命令详解:Sorted Sets
  • 开发童鞋必知必会-Linux命令
  • css清除浮动的8种方法以及优缺点
  • 5G首秀北京CBD 将在智能交通等方面打造“智慧CBD”
  • 【BZOJ1049】 [HAOI2006]数字序列
  • 推动“绿色制造” 上海发布新版产业能效指南
  • 关中海关今日揭牌开关
  • 巨头竞赛:AWS和Azure的云区块链服务有何异同?
  • docker 容器无root 权限,如何获得docker容器里面的root权限
  • 一觉睡醒,我的SC存储性能提高了54%?!
  • [iOS]Core Data浅析一 -- 启用Core Data
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • 【跃迁之路】【735天】程序员高效学习方法论探索系列(实验阶段492-2019.2.25)...
  • 07.Android之多媒体问题
  • Android单元测试 - 几个重要问题
  • docker容器内的网络抓包
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • Java 11 发布计划来了,已确定 3个 新特性!!
  • php面试题 汇集2
  • Rancher如何对接Ceph-RBD块存储
  • React Native移动开发实战-3-实现页面间的数据传递
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • 解决iview多表头动态更改列元素发生的错误
  • 山寨一个 Promise
  • 通过git安装npm私有模块
  • “十年磨一剑”--有赞的HBase平台实践和应用之路 ...
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • UI设计初学者应该如何入门?
  • 数据可视化之下发图实践
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • # Apache SeaTunnel 究竟是什么?
  • ###C语言程序设计-----C语言学习(6)#
  • (06)Hive——正则表达式
  • (C语言)fread与fwrite详解
  • (NO.00004)iOS实现打砖块游戏(九):游戏中小球与反弹棒的碰撞
  • (pojstep1.1.2)2654(直叙式模拟)
  • (多级缓存)多级缓存
  • (二)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (二)丶RabbitMQ的六大核心
  • (附表设计)不是我吹!超级全面的权限系统设计方案面世了
  • (过滤器)Filter和(监听器)listener
  • (十八)SpringBoot之发送QQ邮件
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • (转载)Linux 多线程条件变量同步
  • .Net 访问电子邮箱-LumiSoft.Net,好用
  • .NetCore 如何动态路由
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .NET分布式缓存Memcached从入门到实战