vue中整合mint-ui后打包项目 报css错误的问题
vue中配置mint-ui报css错误的问题
问题详情:
在vue2.0中引入了mint-ui后总是报一个css的错误 ,但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错
答案:
在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css,
但是mint-ui是要冲node_modules目录去引入的,所以在webpack.config中css的配置中加入一项include
css在webpack.config.js 中的module中配置如下(file-loader可以不需要,视情况而定):
JavaScript Code复制内容到剪贴板
- {
- test: /\.css$/,
- include:[
- '/src/',
- '/node_modules/mint-ui/lib/'
- ],
- loader: 'style-loader!css-loader'
- },
- {
- test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
- loader: 'file-loader'
- },
这里需要安装两个插件:style-loader css-loader 如果有引用文件 也可以顺便安装file-loader:
PHP Code复制内容到剪贴板
- # 安装css-loader css加载器
- $ npm install css-loader --save-dev
- $ npm install style-loader --save-dev
- $ npm install file-loader --save-dev
. babelrc中配置了libraryName:
PHP Code复制内容到剪贴板
- {
- "presets": [
- ["env", {
- "modules": false,
- "targets": {
- "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
- }
- }],
- "stage-2"
- ],
- "plugins": [
- "transform-runtime",
- ["component",[
- {
- "libraryName":"mint-ui",
- "style":true
- }
- ]]
- ],
- "env": {
- "test": {
- "presets": ["env", "stage-2"],
- "plugins": ["istanbul"]
- }
- }
- }
package.json要确保es6转义成es5的插件已安装:
【这个地方当前版本没有配置,打包的时候也没有报错,暂搁置】如果webpack.config中没有配置presets:[‘es2015’],的话会报一个import的错误:
这个错误就是因为es6的语法转义失败造成的
注:webpack.config的配置要根据webpack的版本,不同的版本配置方法不一样
本文来自于:http://blog.csdn.net/luckylqh/article/details/54668912