less文件转换css文件,Less 文件转 CSS 文件

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 文件。