vue中整合mint-ui后打包项目 报css错误的问题
vue 2017-09-19 09:23:06

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

QQ截图20170919092631.jpg

问题详情:

在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复制内容到剪贴板
  1. {  
  2.     test: /\.css$/,  
  3.     include:[  
  4.         '/src/',  
  5.         '/node_modules/mint-ui/lib/'  
  6.     ],  
  7.     loader: 'style-loader!css-loader'  
  8. },  
  9. {  
  10.     test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,  
  11.     loader: 'file-loader'  
  12. },  

 

这里需要安装两个插件:style-loader  css-loader  如果有引用文件 也可以顺便安装file-loader:

PHP Code复制内容到剪贴板
  1. # 安装css-loader  css加载器  
  2. $ npm install css-loader --save-dev  
  3. $ npm install style-loader --save-dev  
  4. $ npm install file-loader --save-dev  

 

. babelrc中配置了libraryName:

PHP Code复制内容到剪贴板
  1. {  
  2.   "presets": [  
  3.     ["env", {  
  4.       "modules": false,  
  5.       "targets": {  
  6.         "browsers": ["> 1%""last 2 versions""not ie <= 8"]  
  7.       }  
  8.     }],  
  9.     "stage-2"  
  10.   ],  
  11.   "plugins": [  
  12.     "transform-runtime",  
  13.     ["component",[  
  14.       {  
  15.         "libraryName":"mint-ui",  
  16.         "style":true  
  17.       }  
  18.     ]]  
  19.   ],  
  20.   "env": {  
  21.     "test": {  
  22.       "presets": ["env""stage-2"],  
  23.       "plugins": ["istanbul"]  
  24.     }  
  25.   }  
  26. }  

 

 

 

package.json要确保es6转义成es5的插件已安装:

QQ截图20170919093226.jpg

 

【这个地方当前版本没有配置,打包的时候也没有报错,暂搁置】如果webpack.config中没有配置presets:[‘es2015’],的话会报一个import的错误:

20170122154218979.png

这个错误就是因为es6的语法转义失败造成的

 

注:webpack.config的配置要根据webpack的版本,不同的版本配置方法不一样

本文来自于:http://blog.csdn.net/luckylqh/article/details/54668912

Powered by yoyo苏ICP备15045725号