安装插件:

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. plsql实例精讲部分笔记

    转换sql: create or replace view v_sale(year,month1,month2,month3,month4,month5,month6,month7,month8,mo ...

  2. python的scrapy框架

    scrapy是python中数据抓取的框架.简单的逻辑如下所示 scrapy的结构如图所示,包括scrapy engine.scheduler.downloader.spider.item pipel ...

  3. 下划线css

    /* <div class="text">header</div> */ .text { /* 作用元素 */ display: inline-block; ...

  4. CVE-2012-0158个人分析

    CVE-2012-0158是一个比较有名的老漏洞了,这次从论坛上找到一个poc文件,利用这个poc来分析CVE-2012-0158漏洞的形成. http://bbs.pediy.com/showthr ...

  5. DOM的查找与操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 开发 ASP.NET vNext 初步总结(使用Visual Studio 2015 Preview )

    新特性: vNext又称MVC 6.0,不再需要依赖System.Web,占用的内存大大减少(从前无论是多么简单的一个请求,System.Web本身就要占用31KB内存). 可以self-host模式 ...

  7. spring_150906_sqlmapclientdaosupport_getSqlMapClientTemplate

    添加到ibatis相关jar包! 实体类: package com.spring.model; public class DogPet { private int id; private String ...

  8. Maven下载安装步骤

    Maven下载安装步骤 1.下载maven 进入Maven官网的下载页面:http://maven.apache.org/download.cgi,如下图所示: 选择当前最新版本:"apac ...

  9. EOJ 3265 七巧板

    模拟. 先判断三边形和四边形的个数. 然后判断$5$个三角形是否都是等腰直角三角形. 然后判断$5$个等腰直角三角形比例是否符合要求. 然后寻找正方形.判断比例是否符合要求. 最后判断四边形是否符合要 ...

  10. mysql正则查询 模糊查询

    -- ==============正则查询================ /* SQL默认是忽略大小写的 正则模式使用REGEXP和NOT REGEXP操作符(或RLIKE和NOT RLIKE,它们 ...