babel-plugin-less
一个 Babel 插件，用来帮助你对文件中引用的 less 进行预处理、转换成 css 并自动管理, 支持 cssModule, autoPrefix
Installation
npm install --save-dev @yinxulai/babel-plugin-lessUsage
// .babelrc
{
"presets": [],
"plugins": [
[
"@yinxulai/babel-plugin-less",
{
"autoPrefix": true,
"cssModule": true
}
],
]
}Example
// style.less
.example {
display: grid;
user-select: none;
}// index.jsx
import style from './style.less'最终输出
// 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",
};
Configuration
autoPrefix bool
是否启用自动补充 css 属性的浏览器前缀
cssModule object | bool
本插件使用 postcss-modules 插件来处理 cssModule
如果 style 你的引用方式如 import './style.less'情况，cssModule 会忽略此文件：
同时完整支持 postcss-modules 插件配置，具体请查看
postcss-modules 文档
interface CssModuleOptions {
scopeBehaviour?: 'global' | 'local'
globalModulePaths?: (RegExp | string)[]
generateScopedName?: string | GenerateScopedNameFunction
hashPrefix?: string
camelCase?: boolean
root?: string
}
lessOptions object
本插件使用 less 包来对 less 文件进行预处理，同时完整支持 less 的相关配置
详细信息查看 less 文档
TODO List
- 完善文档
- 添加更多示例
License
MIT
