安装插件:

npm install -g fis-parser-less
npm install -g fis3-postpackager-loader

配置:fis-conf.js

使用fis-parser-less 插件进行解析,.less 文件后缀构建后被改成 .css 文件

fis.match('*.less', {
parser: fis.plugin('less'),
rExt: '.css'
})

less的打包:

//less转换为css
fis.match('*.less', {
parser: fis.plugin('less'),
rExt: '.css'
}); //将less转换出来的css与其他css合并
fis.match('*.{less,css}', {
packTo: '/static/aio.css'
});

比较粗暴的做法:给 loader 插件配置 allInOne 属性,那就是全部css合并为一个,不用指定packTo

fis.match('::package', {
postpackager: fis.plugin('loader', {
allInOne: true
})
}); //将less解析为css
fis.match('*.less', {
parser: fis.plugin('less'),
rExt: '.css'
});

FIS3中使用less的更多相关文章

  1. FIS3的简单使用

    序言: 最近在收集前端的优化工具,随便一搜,厉害了word哥,有grunt.gulp.FIS3.webpack等等,简直就是眼花缭乱!前辈们对于他们的评价各有千秋,于是乎就想每个都来用一遍(之前已经倒 ...

  2. 前端构建工具-fis3使用入门

    FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 官网地址是: https:/ ...

  3. ES6-fetch

    fetch 事实标准,并不存在与ES6规范中,基于Promise实现. 目前项目中对Promise的兼容性尚存在问题,如果在项目中应用fetch,需要引入es6-promise和fetch. fis3 ...

  4. 如何使用Less?

    LESS是动态样式语言,赋予CSS动态语言的特性,如变量.继承.运算.函数,使得CSS更方便编写与维护.>>官网 less @color:#ff0000; body{color:@colo ...

  5. Python开源框架

    info:更多Django信息url:https://www.oschina.net/p/djangodetail: Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC) ...

  6. fis3打包中的一些注意事项

    1.在html文件中,如果在标签的style属性内添加路径,fis不会识别改路径并打包,如 2.fis主要针对静态文件进行打包.对其他文件打包会出现一些问题. 比如jsp页面.下面的例子script. ...

  7. Fis3前端工程化之项目实战

    Fis3项目 项目目录结构: E:. │ .gitignore │ fis-conf.js │ index.html │ package.json │ README.md │ ├─material │ ...

  8. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  9. Fis3的前端工程化之路[三大特性篇之资源定位]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

随机推荐

  1. HDU 3746 Cyclic Nacklace(KMP找循环节)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2087 题目大意:给你一个字符串,求出将字符串的最少出现两次循环节需要添加的字符数. 解题思路: 这题需 ...

  2. Hadoop2.5.2 安装部署

    0x00 平台环境 OS: CentOS-6.5-x86_64 JDK: jdk-8u111-linux-x64 Hadoop: hadoop-2.5.2 0x01 操作系统基本设置 1.1 网络配置 ...

  3. day4 迭代器与生成器解析

    一.迭代器 迭代器是访问集合元素的一种方式.其实迭代器就是一种列表,只是访问集合元素的时候比较特殊,具有一些特定功能,记忆功能,能够记住用户上一次的状态.迭代器是访问集合元素的一种方式.并且,迭代器只 ...

  4. 在LoadRunner中从数组类型的参数随机取值的方法

    在LoadRunner中从数组类型的参数随机取值的方法 使用web_reg_save_param做关联后,有时候会有多个匹配值. 为了模仿用户行为随机取一个值为后续transcation所用,可以使用 ...

  5. 专业的抢票软件 12306bypass

    专业的抢票软件 https://www.12306bypass.com/

  6. poj1753 Flip Game(BFS+位压缩)

    题目链接 http://poj.org/problem?id=1753 题意 一个棋盘上有16个格子,按4×4排列,每个格子有两面,两面的颜色分别为黑色和白色,游戏的每一轮选择一个格子翻动,翻动该格子 ...

  7. php实现var_dump函数

    <?php class VarDump { private static $isInLoop = false; private static $buffer = false; public st ...

  8. Windows 消息循环(2) - WPF中的消息循环

    接上文: Windows 消息循环(1) - 概览 win32/MFC/WinForm/WPF 都依靠消息循环驱动,让程序跑起来. 本文介绍 WPF 中是如何使用消息循环来驱动程序的. 4 消息循环在 ...

  9. 洛谷——P2559 [AHOI2002]哈利·波特与魔法石

    P2559 [AHOI2002]哈利·波特与魔法石 题目描述 输入输出格式 输入格式: 文件中第一行有七个数,分别是 S1. S2 . …. S7 :第二行有两个数,依次分别是起点城市 i 和终点城市 ...

  10. 创建操作表(UIActionSheet)

    UIActionSheet用来创建一个操作表,它的初始化代码如下: - (IBAction)testActionSheet:(id)sender { UIActionSheet *actionShee ...