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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
js window.event对象详尽解析
Feb 17 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
pytyon 带有重复的全排列
2013/08/13 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python实现整数的二进制循环移位
2019/03/08 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python如何制作英文字典
2019/06/25 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
九年级体育教学反思
2014/01/23 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
美术教师求职信范文
2015/03/20 职场文书
超市采购员岗位职责
2015/04/07 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript