qt程序使用less编译.less文件为.qss文件

2年前 (2022) 程序员胖胖胖虎阿
218 0 0

在qt应用程序里使用qrc里的style.qss文件,并且在程序编译的时候将style.less预先编译成style.qss,提供应用程序使用。

前提条件:安装node.js,然后全局安装less
qt程序使用less编译.less文件为.qss文件

方法1

在projects里添加build steps,执行命令行即可,有多少个less文件就添加多少次

qt程序使用less编译.less文件为.qss文件

方法2

在.pro文件里利用qmake进行预编译,编译时机为:build-link

假设你的项目里使用了qrc的style.qss文件,那么它会使用rcc.exe进行编译
qt程序使用less编译.less文件为.qss文件

1.使用QMAKE_PRE_LINK和QMAKE_POST_LINK
无法实时生成,因为这两者的生命周期是在link前后,而rcc.exe是在build期,不符合预期

2.使用system
system生命周期优于build期,但是当.pro文件变化后,system执行lessc命令,但是如果只是修改了.less文件,它不会自动执行,不符合预期

3.使用PRE_TARGETDEPS,QMAKE_EXTRA_TARGETS
它两的生命周期优于build期,符合预期,但是它是非阻塞式的,与build是并发执行的,rcc.exe拿到的还是旧的style.css,不符合预期

4.使用QMAKE_EXTRA_COMPILERS
基本用法

test.output = 文件.qss
test.commands = lessc 文件.less 文件.qss
testInput = 文件.less
test.input = testInput
test.CONFIG = no_link
QMAKE_EXTRA_COMPILERS += test

注意:
1.test.input必须使用变量,且不允许加$ $,写成test.input = 文件1.less或者test.input=$$testInput都是无法解析的

2.test.config必须写成no_link,否则是会报错的
qt程序使用less编译.less文件为.qss文件

封装之后为:

#改变文件后缀名
defineReplace(changeFileSubFix){
    file = $$formatSlash($$1)
    subfix = $$2
    dir = $$dirname(file)
    baseName = $$basename(file)
    baseNameList =$$split(baseName,.)
    fileName = $$first(baseNameList)
    targetFile = $$join(fileName,,$$dir\,$$subfix)
    return ($$targetFile)
}
#less命令,负责将配置的.less文件转换为.qss文件
defineReplace(compileLessCommand){
    file = $$formatSlash($$1)

    targetFile = $$changeFileSubFix($$file,".qss")
    input = $$file
    output = $$targetFile
    commands = $$quote(lessc $$file $$targetFile)

    return ($$input $$output $$commands) #qmake不支持数据,数组嵌套语法
}

使用

styleLessFile = $$PWD/assets/style.less
styleLessResult = $$compileLessCommand($$styleLessFile)
styleLessInput = $$take_first(styleLessResult)
styleLess.input = styleLessInput
styleLess.output = $$take_first(styleLessResult)
styleLess.commands = $$take_first(styleLessResult)
styleLess.CONFIG = no_link
QMAKE_EXTRA_COMPILERS += styleLess

生成的makefile文件:

compiler_styleLess_make_all: ..\..\..\ui\ui\assets\style.qss
compiler_styleLess_clean:
    -$(DEL_FILE) ..\..\..\ui\ui\assets\style.qss
..\..\..\ui\ui\assets\style.qss: ..\..\..\ui\ui\assets\style.less
    lessc C:\UserData\clarence\SVN\qt\ui\ui\assets\style.less C:\UserData\clarence\SVN\qt\ui\ui\assets\style.qss

这样就可以实现运行即编译好qss文件,符合预期

5:
利用qt自动生成的makefile里编译依赖于first,将prebuild的target设置为first,然后让first depends与prebuild即可,当前仅为思路,后续试验

6:
与5类似,对MakeFile.Debug和MakeFile.Release进行hack,仅为思路,后续试验

版权声明:程序员胖胖胖虎阿 发表于 2022年10月20日 上午10:40。
转载请注明:qt程序使用less编译.less文件为.qss文件 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...