babel-plugin-less
一个 Babel
插件,用来帮助你对文件中引用的 less
进行预处理、转换成 css
并自动管理, 支持 cssModule
, autoPrefix
Installation
npm install --save-dev @yinxulai/babel-plugin-less
Usage
// .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