当前位置: 首页>前端>正文

less 命令将 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 文件。


https://www.xamrdz.com/web/2tr1939865.html

相关文章: