babel-plugin-less

一个 Babel 插件，用来帮助你对文件中引用的 less 进行预处理、转换成 css 并自动管理, 支持 cssModule, autoPrefix

Installation

``shell
npm install --save-dev @yinxulai/babel-plugin-less
`

Usage

`js
// .babelrc
{
"presets": [],
"plugins": [
[
"@yinxulai/babel-plugin-less",
{
"autoPrefix": true,
"cssModule": true
}
],
]
}
`

$3

`less
// style.less
.example {
display: grid;
user-select: none;
}
`

`js
// index.jsx
import style from './style.less'
`

最终输出

`js
// outfile.js
(function (elementID, css) {
if (typeof window == 'undefined') return;
if (typeof document == 'undefined') return;
if (typeof document.head == 'undefined') return;
if (window.document.getElementById(elementID)) return;
var style = document.createElement('style');
style.type = "text/css";
style.id = elementID;
style.innerHTML = css;
document.head.appendChild(style);
})("elementID", "CSS");

// render 到 html 上时:
// .example {
// display: -ms-grid;
// display: grid;
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
// user-select: none;
// }


var style = {
"example": "_example_1q9fy_1",
};

`

$3

#### autoPrefix bool

是否启用自动补充 css 属性的浏览器前缀

#### cssModule object | bool

本插件使用 postcss-modules 插件来处理 cssModule
如果 style 你的引用方式如 `import './style.less'`情况，cssModule 会忽略此文件：
同时完整支持 postcss-modules 插件配置，具体请查看
postcss-modules 文档

`ts
interface CssModuleOptions {
scopeBehaviour?: 'global' | 'local'
globalModulePaths?: (RegExp | string)[]
generateScopedName?: string | GenerateScopedNameFunction
hashPrefix?: string
camelCase?: boolean
root?: string
}
`

#### lessOptions object

本插件使用 less 包来对 less 文件进行预处理，同时完整支持 less` 的相关配置
详细信息查看 less 文档

$3

* [ ] 完善文档
* [ ] 添加更多示例

License

MIT