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 进行转换