vue中配置mint-ui报css错误问题的解决方法

在 Vue 中配置 Mint-UI 遇到 CSS 错误问题的解决之道

在 Vue 2.0 中引入 Mint-UI 后，你可能会遇到一个 CSS 错误。尽管你的 package.json 中已经配置了 css-loader 和 style-loader，webpack.config 中也配置了 CSS，但错误依旧存在。相反，如果注释掉 webpack.config 中的 CSS 配置，错误就会消失。这是为什么呢？

这是因为 webpack.config 中的 CSS 配置可能没有正确设置 CSS 引入的目录。默认情况下，我们只会引入 /src/ 目录下的 CSS，而 Mint-UI 需要从 node_modules 目录引入。你需要在 webpack.config 的 CSS 配置中加入以下一项：

```javascript

{

test: /\.css$/,

include: [

/src/,

'/node_modules/mint-ui/lib/' // 添加此项

],

loader: "style!css"

}

```

你还需要在 .babelrc 中进行配置。确保你的插件部分配置如下：

```json

{

"presets": ["es2015", "stage-0"],

"plugins": [

[

"component",

[

{

"libraryName": "mint-ui",

"style": true

}

]

]

]

}

```

请注意，你需要确保已经将 ES6 转义为 ES5 的插件都已经安装。如果 webpack.config 中没有配置 presets:["es2015"]，你可能会遇到一个 import 错误。这个错误是由于 ES6 语法的转义失败造成的。

需要注意的是，webpack.config 的配置要根据 webpack 的版本进行配置。不同版本的 webpack 配置方法可能不同。在这里，我使用的是 webpack 1.0 的版本。

以上就是关于在 Vue 中配置 Mint-UI 报 CSS 错误问题的解决方法。希望这篇文章能对你的学习有所帮助，也希望大家多多支持狼蚁SEO。如果你还有其他问题或疑问，欢迎随时向我提问。