{"id":20287714,"url":"https://github.com/yinxulai/babel-plugin-less","last_synced_at":"2025-04-11T09:58:31.095Z","repository":{"id":43988673,"uuid":"241624480","full_name":"yinxulai/babel-plugin-less","owner":"yinxulai","description":"一个 Babel 插件，用来帮助你对文件中引用的 less 进行预处理、转换成 css 并自动管理, 支持 cssModule, autoPrefix","archived":false,"fork":false,"pushed_at":"2023-01-05T07:56:27.000Z","size":368,"stargazers_count":4,"open_issues_count":10,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-08T22:04:36.452Z","etag":null,"topics":["autoprefix","babel","css","cssmodule","less","plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yinxulai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-19T13:08:50.000Z","updated_at":"2023-12-17T13:46:19.000Z","dependencies_parsed_at":"2023-02-03T19:15:35.476Z","dependency_job_id":null,"html_url":"https://github.com/yinxulai/babel-plugin-less","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinxulai%2Fbabel-plugin-less","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinxulai%2Fbabel-plugin-less/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinxulai%2Fbabel-plugin-less/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinxulai%2Fbabel-plugin-less/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yinxulai","download_url":"https://codeload.github.com/yinxulai/babel-plugin-less/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248371962,"owners_count":21093130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autoprefix","babel","css","cssmodule","less","plugin"],"created_at":"2024-11-14T14:42:06.833Z","updated_at":"2025-04-11T09:58:31.076Z","avatar_url":"https://github.com/yinxulai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-less\n\n一个 `Babel` 插件，用来帮助你对文件中引用的 `less` 进行预处理、转换成 `css` 并自动管理, 支持 `cssModule`, `autoPrefix`\n\n## Installation\n\n```shell\nnpm install --save-dev @yinxulai/babel-plugin-less\n```\n\n## Usage\n\n```js\n// .babelrc\n{\n  \"presets\": [],\n  \"plugins\": [\n    [\n      \"@yinxulai/babel-plugin-less\",\n      {\n        \"autoPrefix\": true,\n        \"cssModule\": true\n      }\n    ],\n  ]\n}\n```\n\n### Example\n\n```less\n// style.less\n.example {\n    display: grid;\n    user-select: none;\n}\n```\n\n```js\n// index.jsx\nimport style from './style.less'\n```\n\n***最终输出***\n\n```js\n// outfile.js\n(function (elementID, css) {\n  if (typeof window == 'undefined') return;\n  if (typeof document == 'undefined') return;\n  if (typeof document.head == 'undefined') return;\n  if (window.document.getElementById(elementID)) return;\n  var style = document.createElement('style');\n  style.type = \"text/css\";\n  style.id = elementID;\n  style.innerHTML = css;\n  document.head.appendChild(style);\n})(\"elementID\", \"CSS\");\n\n// render 到 html 上时:\n// .example {\n//    display: -ms-grid;\n//    display: grid;\n//    -webkit-user-select: none;\n//       -moz-user-select: none;\n//        -ms-user-select: none;\n//            user-select: none;\n// }\n\n\nvar style = {\n  \"example\": \"_example_1q9fy_1\",\n};\n\n```\n\n### Configuration\n\n#### `autoPrefix` bool\n\n是否启用自动补充 `css` 属性的浏览器前缀\n\n#### `cssModule` object | bool\n\n 本插件使用 `postcss-modules` 插件来处理 `cssModule`\n  如果 style 你的引用方式如 ```import './style.less'```情况，cssModule 会忽略此文件：\n 同时完整支持 `postcss-modules` 插件配置，具体请查看\n [postcss-modules 文档](https://github.com/css-modules/postcss-modules)\n\n```ts\ninterface CssModuleOptions {\n  scopeBehaviour?: 'global' | 'local'\n  globalModulePaths?: (RegExp | string)[]\n  generateScopedName?: string | GenerateScopedNameFunction\n  hashPrefix?: string\n  camelCase?: boolean\n  root?: string\n}\n```\n\n#### `lessOptions` object\n\n 本插件使用 `less` 包来对 `less` 文件进行预处理，同时完整支持 `less` 的相关配置\n 详细信息查看 [less 文档](https://github.com/less/less-docs/blob/master/content/usage/less-options.md)\n\n### TODO List\n\n* [ ] 完善文档\n* [ ] 添加更多示例\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyinxulai%2Fbabel-plugin-less","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyinxulai%2Fbabel-plugin-less","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyinxulai%2Fbabel-plugin-less/lists"}