https://github.com/yinxulai/babel-plugin-less

一个 Babel 插件，用来帮助你对文件中引用的 less 进行预处理、转换成 css 并自动管理, 支持 cssModule, autoPrefix
https://github.com/yinxulai/babel-plugin-less

autoprefix babel css cssmodule less plugin

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yinxulai/babel-plugin-less
• Owner: yinxulai
• Created: 2020-02-19T13:08:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T07:56:27.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T22:47:18.536Z (about 1 month ago)
• Topics: autoprefix, babel, css, cssmodule, less, plugin
• Language: TypeScript
• Homepage:
• Size: 359 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

      }

    ],

  ]

}

```

### Example

```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",

};

```

### Configuration

#### `autoPrefix` bool

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

#### `cssModule` object | bool

 本插件使用 `postcss-modules` 插件来处理 `cssModule`

  如果 style 你的引用方式如 ```import './style.less'```情况，cssModule 会忽略此文件：

 同时完整支持 `postcss-modules` 插件配置，具体请查看

 [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

}

```

#### `lessOptions` object

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

 详细信息查看 [less 文档](https://github.com/less/less-docs/blob/master/content/usage/less-options.md)

### TODO List

* [ ] 完善文档

* [ ] 添加更多示例

## License

MIT