安装插件:

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. [Ext JS 4]后台自动产生图档

    前言 [Ext JS 4] 实战之将chart导出为png, jpg 格式的文件 承接上一篇, 我们可以做到在Browser端打开一个Chart,并导出为png或是jpg 等格式的图档. 但实际的需求 ...

  2. Windows内核读书笔记——SEH结构化异常处理

    SEH是对windows系统中的异常分发和处理机制的总称,其实现分布在很多不同的模块中. SEH提供了终结处理和异常处理两种功能. 终结处理保证终结处理块中的程序一定会被执行 __try { //要保 ...

  3. Windows内核读书笔记——Windows异常分发处理机制

    本篇读书笔记主要参考自<深入解析Windows操作系统>和<软件调试>这两本书. IDT是处理异常,实现操作系统与CPU的交互的关口. 系统在初始化阶段会去填写这个结构. ID ...

  4. SimpleCV install and "You need the python image library to save by filehandle"

    2015年5月3日 22:15:43 在win7下安装了python.simplecv,试着运行simplecv官网第一个hello world程序结果报错,提示说%python%/lib/site- ...

  5. 洛谷 P2639 [USACO09OCT]Bessie的体重问题Bessie's We… 题解

    题目传送门 这也是个01背包,只是装的很... #include<bits/stdc++.h> #define MAXN 45010 using namespace std; int f[ ...

  6. 面试题32:从1到n整数中1出现的次数

    这是一道广为流传的google面试题.用最直观的方法求解并不是很难,但遗憾的是效率不是很高:而要得出一个效率较高的算法,需要比较强的分析能力,并不是件很容易的事情.当然,google的面试题中简单的也 ...

  7. Technology share: VR is coming,are you ready?

    ►Date 2016-10-18 ►Address 上海市浦东新区严家桥1号宏慧音悦湾3号楼5楼 VR SPACE ►Events 品牌如何抢先一步,借玩VR吸引眼球,如何让客户作为VR买单? 如何结 ...

  8. 使用FlashPaper在线转换.doc为.swf_实用技巧

    https://yq.aliyun.com/ziliao/160044?spm=5176.8246799.0.0.JBbqjY 摘要: 本文讲的是使用FlashPaper在线转换.doc为.swf_实 ...

  9. 牛客练习赛9 F - 珂朵莉的约数

    题目描述 珂朵莉给你一个长为n的序列,有m次查询 每次查询给两个数l,r 设s为区间[l,r]内所有数的乘积 求s的约数个数mod 1000000007 输入描述: 第一行两个正整数n,m第二行一个长 ...

  10. Web应用类型扫描识别工具WhatWeb

    Web应用类型扫描识别工具WhatWeb   WhatWeb是一款Kali Linux预安装的Web扫描工具.它使用Ruby语言编写.该工具可以扫描网站,获取该网站的各类信息,如所使用的CMS.博客平 ...