Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。很多时候为了书写方便，在项目中会直接使用 less 进行样式的书写。之后在 webpack 打包的过程中，使用 ['style-loader', 'css-loader', 'less-loader'] 这样的形式，将 less 资源直接打包到 js 文件中。
最近由于项目的需要，需要给多个不同的平台提供 React 组件库，同一组件在不同平台的功能一致，但是样式有所不同，如果仍然使用上面的方式进行打包，显然很难满足不同平台对不同样式的需求，因此我开始调研相关的解决方案。在解决方案调研的过程中。查看了多个知名组件库的源码。发现在诸如 ant-design 这样的知名组件库中，React 组件的书写和样式的书写是分开的，用户在使用过程中，除了需要引入 React 组件之外，还需要统一引入打包好的 css 样式文件。那么问题来了，应该怎么将 less 文件转换成 css 文件呢？
使用 antd-tools 中的 less 转换函数进行转换
在初略阅读 ant-design 源码时发现，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 文件。