@yinxulai/babel-plugin-less
Version:
一个 `Babel` 插件，用来帮助你对文件中引用的 `less` 进行预处理、转换成 `css` 并自动管理, 支持 `cssModule`, `autoPrefix`
114 lines (87 loc) • 2.34 kB
Markdown
一个 `Babel` 插件，用来帮助你对文件中引用的 `less` 进行预处理、转换成 `css` 并自动管理, 支持 `cssModule`, `autoPrefix`
```shell
npm install --save-dev @yinxulai/babel-plugin-less
```
```js
// .babelrc
{
"presets": [],
"plugins": [
[
"@yinxulai/babel-plugin-less",
{
"autoPrefix": true,
"cssModule": true
}
],
]
}
```
```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",
};
```
是否启用自动补充 `css` 属性的浏览器前缀
本插件使用 `postcss-modules` 插件来处理 `cssModule`
如果 style 你的引用方式如 ```import './style.less'```情况，cssModule 会忽略此文件：
同时完整支持 `postcss-modules` 插件配置，具体请查看
[](https://github.com/css-modules/postcss-modules)
```ts
interface CssModuleOptions {
scopeBehaviour?: 'global' | 'local'
globalModulePaths?: (RegExp | string)[]
generateScopedName?: string | GenerateScopedNameFunction
hashPrefix?: string
camelCase?: boolean
root?: string
}
```
本插件使用 `less` 包来对 `less` 文件进行预处理，同时完整支持 `less` 的相关配置
详细信息查看 [less 文档](https://github.com/less/less-docs/blob/master/content/usage/less-options.md)
* [ ] 完善文档
* [ ] 添加更多示例
MIT