webpack处理 css\less\sass 样式的方法


Posted in Javascript onAugust 21, 2017

本文介绍了webpack处理 css\less\sass 样式的方法,分享给大家,具体如下:
(一)处理普通的.css 文件,需要安装 css-loader,style-loader

.less 文件,需要安装 less-loader

.sass 文件,需安装  less-loader

npm install --save-dev css-loader
npm install --save-dev css-loader
npm install less-loader --save-dev

(二)在项目中,我们会遇到 不同浏览器,前缀不同。比如 display: flex ,在IE以及谷歌下前缀是不同的,

这时候,我们需要 postcss 这样的插件

npm install postcss-loader --save-dev
npm install autoprefixer --save-dev

安装好相关loader后,我们需要在webpack.config.js 中 加入相关配置代码,如下

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
  /*context: __dirname,*/
  entry: './src/app.js',

  output: {
    path: './dist',
    filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
  },
  module: {
    loaders: [
      {
        test: /\.css$/, //正则表达式,匹配.css文件
        loader: 'style!css?importLoaders=1!postcss' //处理顺序 从右到左







// ?importLoaders=1 表示 引入嵌入的 css文件也会按照postcss这样自动添加前缀
      },
      {
        test: /\.less$/,
        loader: 'style!css!postcss!less'
      }
    ],
    rules: [{
      test: /\.(css|scss|less)$/,
      loader:"style-loader!css-loader?importLoaders=1!postcss-loader" //由于webpack2.X 版本对post-css书写方式的改变






















  //需要新添加 postcss.config.js
    }] 
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html', //通过模板生成的文件名
      template: 'index.html',//模板路径
      inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接

    })
  ]
};

postcss.config.js 代码如下

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: 'last 5 version' //前五种浏览器版本
    })
  ]
};
import layer from './components/layer/layer.js';
import './css/common.css';

const App = function () {
  console.log(layer);
}

new App();

layer.js

import './layer.less';

function layer(){
  return{
    name:'layer',
    tpl:'tpl'
  };
}

export default layer;
//layer.less
.layer{
 width:600px;
 height: 200px;
 border: 1px solid yellow;
}

//common.css
@import "flex.css";
html{
  background-color: red;
}

ul,li{
  padding:0;
  margin:0;
  list-style:none;
}
.styleFlex {
  display: flex;
}

//flex.css
.flexFlex {
  display: flex;
}

使用webpack 编译后,可以查看,相关css以及被编译在index.html,前缀css 自动完成。

webpack处理 css\less\sass 样式的方法

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

Javascript 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
JavaScript实现异步图像上传功能
Jul 12 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 #Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
You might like
PHP数据库开发知多少
2006/10/09 PHP
PHP实现货币换算的方法
2014/11/29 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
应届生简历中的自我评价
2014/01/13 职场文书
小学毕业感言50字
2014/02/16 职场文书
启动仪式策划方案
2014/06/14 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
世界读书日的活动方案
2014/08/20 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书