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

在Vue 2.0项目中引入mint-ui时遇到的CSS报错问题

当你在vue项目中引入了mint-ui，却遇到了CSS报错，即使你的package.json中已经配置了css-loader和style-loader，webpack.config中也已经配置了css，错误依旧存在。这时，你可能需要在webpack的配置中明确设置CSS文件的引入目录。

默认情况下，webpack可能只会引入/src/目录下的CSS文件。mint-ui的样式文件位于node_modules目录下，因此你需要在webpack.config的css配置中加入对应的目录。具体配置如下：

```javascript

{

test: /\.css$/,

include: [

/src/,

'/node_modules/mint-ui/lib/' // 这里添加node_modules下的mint-ui目录

],

loader: "style!css"

}

```

你还需要在.babelrc中进行相应的配置，以确保ES6的语法能够成功转换为ES5。配置内容如下：

```json

{

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

"plugins": [

[

"component",

[

{

"libraryName": "mint-ui",

"style": true

}

]

]

]

}

```

请注意，你需要确保已经安装了将ES6转换为ES5的插件。如果没有安装，你会在遇到import语句时报错。这个错误正是由于ES6语法转义失败导致的。webpack.config的配置要根据webpack的版本进行，不同的版本配置方法可能会有所不同。以上是针对webpack 1.0版本的配置方法。

只要你按照上述步骤正确配置webpack和babel，你应该能够在Vue项目中成功引入并使用mint-ui，而不会再遇到CSS报错的问题。希望这篇文章能对你的学习有所帮助，同时也希望大家多多支持狼蚁SEO。