一段代码，使用koa-less配合autoprefixer编译less

拼搏现实的明天。 2023-02-15 03:46 26阅读 0赞

使用koa开发项目的时候，如果想使用less的方式写css，就可以用koa-less进行less的编译处理。

还可以配合postcss的插件autoprefixer来进行浏览器前缀的添加。

var Koa = require('koa'),
        app = new Koa(),
        serve = require('koa-static'),
        convert = require('koa-convert'),
        less = require('koa-less')
    var path = require('path')
    
    // 为浏览器加前缀
    var autoprefixer = require('autoprefixer');
    var postcss = require('postcss')
    
    // 处理less
    app.use(convert(less(path.join(__dirname, 'less'),{
        dest:path.join(__dirname, 'public'),
        postprocess:{
            css:function (css,req) {
                // 在保存编译的css数据之前的回调函数
                var result = postcss([ autoprefixer({overrideBrowserslist:[">0%"]}) ]).process(css);
    
                // 或者直接这样写，将browserslist配置在package.json中
                // var result = postcss([ autoprefixer ]).process(css);
                return result.css
            }
        }
    })))
    
    // 初始化静态文件目录
    app.use(serve(path.join(__dirname, 'public')))
    
    app.listen(3000, function() {
        console.log(`访问 http://localhost:3000/css/style.css 就能够看到less编译后的样式文件`)
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604165123575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关使用vscode自动编译less

1.到应用商店安装easyless插件 2.在setting.json中添加配置 "less.compile": { "compres

落日映苍穹つ/ 2023年06月25日 10:25/ 0 赞/ 36 阅读

相关一段代码，vue如何使用photoswipe

使用npm安装photoswipe npm i photoswipe 编辑photoswipe的vue组件 <template>

- 日理万妓/ 2023年02月16日 05:52/ 0 赞/ 30 阅读

相关一段代码，使用koa-less配合autoprefixer编译less

使用koa开发项目的时候，如果想使用less的方式写css，就可以用koa-less进行less的编译处理。还可以配合postcss的插件autoprefixer来进行浏览

拼搏现实的明天。/ 2023年02月15日 03:46/ 0 赞/ 27 阅读

相关 grep 和less配合查看日志

工作中查看日志得方法：记录一下 grep -v -E 'IDLE| PING' production.log-$(date +%Y%m%d) | gre

刺骨的言语ヽ痛彻心扉/ 2022年11月12日 02:33/ 0 赞/ 206 阅读

相关 vscode中使用less编译wxss

> 设置中打开settings.json加入： > > "less.compile": \{ > > "outExt":".wxss" > > \} > > 之后记得重

亦凉/ 2022年10月24日 01:54/ 0 赞/ 196 阅读

相关 LESS详解之编译LESS

　　掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CS

╰+攻爆jí腚メ/ 2022年09月17日 13:11/ 0 赞/ 495 阅读

相关 webpack@1.x 和 webpack@2.x ，SASS ，LESS ,使用autoprefixer

webpack@1.x 在webpack.config.js文件下， vue: { postcss: [require('autoprefixe

短命女/ 2022年06月17日 01:59/ 0 赞/ 278 阅读

相关一段代码样本

set objShell=wscript.createObject("wscript.shell") iReturn=objShell.Run("cmd.exe

川长思鸟来/ 2022年06月09日 00:45/ 0 赞/ 235 阅读

相关如何编译.less文件（less.js）

有多少种方式可以将.less文件转换为.css文件 > > Less给 CSS 加点料!Less （Leaner Style Sheets 的缩写）是一门向后兼容的 C

向右看齐/ 2022年04月12日 12:48/ 0 赞/ 313 阅读

相关一篇迟到的gulp文章，代码合并压缩，less编译

前言这篇文章本应该在去年17年写的，但因为种种原因没有写，其实主要是因为懒（捂脸）。gulp出来的时间已经很早了，16年的时候还很流行，到17年就被webpack

小鱼儿/ 2022年04月10日 12:15/ 0 赞/ 332 阅读