### 解决方案
在使用 `ant
-design
-vue` 的 `<a
-textarea>` 组件时，如果遇到与 `node_modules/ant
-design
-vue/es/
textarea/style/index` 相关的报错问题，通常是由于以下几个原因导致：Less 配置未正确启用 JavaScript 支持、依赖版本不匹配或样式加载方式存在问题。以下是具体的解决方法：
#### 1. 启用 Less 的 JavaScript 支持
`ant
-design
-vue` 的样式文件中可能包含嵌入式 JavaScript 表达式（如 `.bezierEasingMixin
()`）。如果不启用 Less 的 JavaScript 支持，就会触发类似以下错误：
```
error in ./node_modules/ant
-design
-vue/es/style/index.less
Module build failed
(from ./node_modules/less
-loader/dist/cjs.js
):
// https://github.com/ant
-design/ant
-motion/issues/44
.bezierEasingMixin
();
^ In
line JavaScript is not enabled. Is it set in your options?
```
要解决这个问题，需要确保 Webpack 的 Less 加载器启用了 `javascriptEnabled` 选项。具体操作如下：
##### Vue CLI 项目配置
编辑项目的 `vue.config.js` 文件，添加以下内容[^1]：
```javascript
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
},
},
};
```
##### 手动配置 Webpack
如果你正在手动管理 Webpack 配置，可以在 `rules` 中找到针对 `.less` 文件的规则，并添加 `javascriptEnabled: true` 参数。例如：
```javascript
{
test: /\.less$/,
use: [
&#
39;style
-loader&#
39;,
&#
39;css
-loader&#
39;,
{
loader: &#
39;less
-loader&#
39;,
options: {
javascriptEnabled: true,
},
},
],
},
```
#### 2. 检查依赖版本一致性
确保项目中安装的 `ant
-design
-vue` 和其他相关依赖（如 `less`, `less
-loader`）版本一致且兼容。推荐的最低版本组合如下：
- `ant
-design
-vue`: v2.x 及以上
- `less`: v
3.x 或更高
- `less
-loader`: v7.x 或更高
运
行以下命令升级到最新稳定版：
```bash
npm install ant
-design
-vue@latest less@latest less
-loader@latest
--save
-dev
```
####
3. 确保按需加载配置正确
如果项目采用了按需加载的方式引入 `ant
-design
-vue`，则需要正确配置 `babel
-plugin
-import` 插件。否则可能会因部分样式缺失而导致渲染异常。
在 Babel 配置文件（如 `.babelrc` 或 `babel.config.js`）中添加以下内容：
```json
{
"plugins": [
["import", { "libraryName": "ant
-design
-vue", "style": "css" }]
]
}
```
注意：当 `style` 值设为 `"css"` 时表示只加载纯 CSS 样式；若设为 `"true"` 则会加载完整的 Less 文件。
#### 4. 清理缓存并重启开发服务器
完成上述更改后，请清除旧的构建缓存并重新启动开发服务器以验证修复效果：
```bash
rm
-rf node_modules/.cache
npm run serve
```
---
### 示例代码
以下是一个简单的示例，演示如何正确使用 `<a
-textarea>` 并避免常见问题：
```html
<template>
<a
-config
-provider :locale="locale">
<div id="app">
<a
-row>
<a
-col :span="12">
<a
-textarea
placeholder="请输入..."
:autoSize="{ min
Rows:
3, max
Rows: 6 }"
/>
</a
-col>
</a
-row>
</div>
</a
-config
-provider>
</template>
<script>
import zhCN from &#
39;ant
-design
-vue/lib/locale
-provider/zh_CN&#
39;;
export default {
data
() {
return {
locale: zhCN,
};
},
};
</script>
<style scoped>
/deep/ .ant
-input {
border
-color: #d9d9d9;
transition: all 0.
3s ease
-in
-out;
}
/deep/ .ant
-input:focus {
border
-color: #40a9ff;
box
-shadow: 0 0
5px rgba
(64, 169, 2
55, 0.
5);
}
</style>
```
---
### 注意事项
- 如果仍然无法解决问题，请尝试删除 `node_modules` 文件夹和 `package
-lock.json` 文件后重新安装依赖。
- 确认是否遗漏了某些必要的 Polyfill 或浏览器兼容性补丁。
---
###
扫一扫
1960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
