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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
解决vue-loader加载不上的问题
Oct 21 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
PHP5 字符串处理函数大全
2010/03/23 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
初学Javascript的一些总结
2008/11/03 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
NET程序员上机面试题
2015/05/23 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
致200米运动员广播稿
2014/02/06 职场文书
成语的广告词
2014/03/19 职场文书
教师党员一句话承诺
2014/03/28 职场文书
初中学校对照检查材料
2014/08/19 职场文书
商务邀请函
2015/01/30 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS