# babel-plugin-less-color-to-js

## 简介

`babel-plugin-less-color-to-js` 是一个 Babel 插件，旨在解决在 JavaScript 中使用 LESS 颜色变量的问题。插件会自动将全局 LESS 文件中定义的颜色变量替换到对应的 JavaScript 字符串字面量中。这样，你就能够在你的 JavaScript 文件中直接使用 LESS 颜色变量的名称，而无需担心颜色值的问题。

## 安装

使用 npm 进行安装：

```bash
npm install --save-dev babel-plugin-less-color-to-js
```

## 使用

首先，你需要创建一个 `BabelLessColorToJs` 的实例，并传入你的全局 LESS 文件的路径：

```javascript
const BabelLessColorToJs = require('babel-plugin-less-color-to-js');

const babelLessColorToJs = new BabelLessColorToJs({
  fileName: 'path/to/your/less/file.less',
});
```

然后，在你的 Babel 配置中将这个实例添加到 plugins 数组中：

```javascript
module.exports = {
  // ...
  plugins: [
    // ...
    babelLessColorToJs,
    // ...
  ],
};
```

这样，你的全局 LESS 文件中定义的颜色变量就可以在 JavaScript 中直接使用了。例如，如果你有一个颜色变量 `@primary-color: #1DA57A;`，你可以在你的 JavaScript 文件中这样使用：

```javascript
const color = '@primary-color';  // 这将会被替换为 '#1DA57A'
```

注意，这个插件会影响所有的字符串字面量，不仅仅是那些在样式属性中使用的字符串。所以你需要确保你的代码中没有使用颜色名称的字符串会在非预期的地方被替换。

## 注意事项

- 如果 LESS 文件在构建过程中发生变化，你可能需要重新启动构建过程，以确保颜色值的准确性。

- 此插件只能处理在 LESS 文件中定义的颜色变量。如果你的颜色值是在 JavaScript 中定义的，或者是在 CSS、SCSS、Stylus 等其它样式文件中定义的，那么这个插件可能无法正确地处理。

## 贡献

欢迎对此项目做出贡献。如果你有任何问题或建议，可以通过 issues 或 pull requests 来提交。