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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
js实现简单五子棋游戏
May 28 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语法(1)
2006/10/09 PHP
关于时间计算的结总
2006/12/06 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
解决vue点击控制单个样式的问题
2018/09/05 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python常用运维脚本实例小结
2020/02/14 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
颁奖晚会主持词
2014/03/25 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
副总经理岗位职责
2015/02/02 职场文书
Python合并多张图片成PDF
2021/06/09 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python