Less 文件转 CSS 文件

时间:2021-2-20 作者:admin

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。很多时候为了书写方便,在项目中会直接使用 less 进行样式的书写。之后在 webpack 打包的过程中,使用 ['style-loader', 'css-loader', 'less-loader'] 这样的形式,将 less 资源直接打包到 js 文件中。

最近由于项目的需要,需要给多个不同的平台提供 React 组件库,同一组件在不同平台的功能一致,但是样式有所不同,如果仍然使用上面的方式进行打包,显然很难满足不同平台对不同样式的需求,因此我开始调研相关的解决方案。

使用 antd-tools 中的 less 转换函数进行转换

在解决方案调研的过程中。查看了多个知名组件库的源码。发现在诸如 ant-design 这样的知名组件库中,React 组件的书写和样式的书写是分开的,用户在使用过程中,除了需要引入 React 组件之外,还需要统一引入打包好的 css 样式文件。而根据阅读源码发现,ant-design 实际也是使用 less 进行样式书写的,因此必然存在将 less 文件统一打包成 css 文件的方法。

之后翻了一下 package.json 中的 scripts 命令,果然存在将 less 编译成 css 文件的命令:

"compile:less": "antd-tools run compile:less"

看命令应该是使用了 antd-tools 进行转换,之后翻看 antd-tools 源码,发现了下面类似的转换函数:

const less = require('less');
const fs = require('fs');
const path = require('path');
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const NpmImportPlugin = require('less-plugin-npm-import');

function transformLess(lessFile, config = {}) {
    const { cwd = process.cwd() } = config;
    const resolvedLessFile = path.resolve(cwd, lessFile);

    let data = fs.readFileSync(resolvedLessFile, 'utf-8');
    data = data.replace(/^\uFEFF/, '');

    // Do less compile
    const lessOpts = {
        paths: [path.dirname(resolvedLessFile)],
        filename: resolvedLessFile,
        plugins: [new NpmImportPlugin({ prefix: '~' })],
        javascriptEnabled: true,
    };
    const toWritePath = path.resolve(__dirname, '../lib', 'index.css');
    return less.render(data, lessOpts)
        .then(result => postcss([autoprefixer]).process(result.css, { from: undefined }))
        .then(r => r.css);
}

将上述的代码进行简单的改造后,基本已经完成了我的需求,相关的 demo 可以参考: github.com/wujc16/less…

lessc 命令直接打包

之后,通过观察上面的工具函数发现,transformLess 实际使用了 less 包进行转换,于是我想官方或者第三方是否提供了类似的命令行转换的方式,通过 google 后,果然在 lesscss.org/ 上发现了相关资料,node 安装 less 后,完全可以使用 lessc 命令进行转换:

npm install less --dev
npx lessc ./src/index.less ./lib/index.css

特别需要注意的是,安装的包是 less,但是转换使用的命令是 lessc

结语

到这里,其实基本上完成了我的需求,只需要将不同主题的各个样式文件统一到对应的入口 less 文件中,之后统一运行编译命令即可生成对应主题的 css 文件。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。