注册登录

c***@163.com

发布：2017-07-12 16:43
更新：2017-08-14 13:47
阅读：4911

vue引入css打包出错的问题

分类：MUI

Vue

我在main.js引用的时候import "mui.min.css";，npm run dev是没有问题的，但是npm run build 就报错

ERROR in ./~/css-loader?{"minimize":true,"sourceMap":true}!./src/assets/css/mui.min.css  
Module build failed:   
 @ ./~/css-loader?{"minimize":true,"sourceMap":true}!./src/assets/css/common.css 3:10-117  
 @ ./src/assets/css/common.css  
 @ ./src/module/index/index.js  

ERROR in ./src/assets/css/common.css  
Module build failed: ModuleBuildError: Module build failed:   
    at runLoaders (/Users/century/vue/dingDong/node_modules/webpack/lib/NormalModule.js:192:19)  
    at /Users/century/vue/dingDong/node_modules/loader-runner/lib/LoaderRunner.js:364:11  
    at /Users/century/vue/dingDong/node_modules/loader-runner/lib/LoaderRunner.js:230:18  
    at context.callback (/Users/century/vue/dingDong/node_modules/loader-runner/lib/LoaderRunner.js:111:13)  
    at Object.<anonymous> (/Users/century/vue/dingDong/node_modules/css-loader/lib/loader.js:49:18)  
    at /Users/century/vue/dingDong/node_modules/css-loader/lib/processCss.js:230:4  
    at <anonymous>  
    at runMicrotasksCallback (internal/process/next_tick.js:86:5)  
    at _combinedTickCallback (internal/process/next_tick.js:95:7)  
    at process._tickCallback (internal/process/next_tick.js:161:9)

2017-07-12 16:43 负责人:无分享

6 个回复

c***@163.com (作者)

我引用自己写的css，就没问题，比如index.css import "index.css",我怀疑是不是跟font.ttf有关系

头疼的码农

头疼的码农

10块解决

c***@163.com (作者)

mui都人吗，一个也不回答

赵梦欢 - 专注前端，乐于分享！

目测你的应该是webpack的配置问题，贴出webpack.config.js，但看错误很难定位问题。

将vue.js 和 mui这些库一股脑的打在一起不是什么好想法，如果是web开发，一般是将这些库提取出来走cdn，只会将业务逻辑打包。如果是App开发，个人觉得你这样做也未必是好的处理方法：

混合式App开发目前主要的架构：

基于单webview构建的SPA应用，主要是利用JSBridge调用原生代码，典型的框架：cordova+ionic
Hybrid方向+模板骨架工程（原生骨架+多webview）
使用Javascript开发纯原生应用，react native/weex/nativeScript

如果是想优化，个人觉得第二种折中的方案可能更好。较好的一种方式是分模块，就相同业务逻辑的方一个webview，局部做成SPA；也就是多webview+SPA，每个webview都是一个SPA工程。

为了发挥出5+ webview和native View的优势，建议采用多页面应用（MPA）构建，我建了一个模板工程，可以看vue-html5plus插件和模板工程：https://github.com/vue-html5plus。

前段时间在segmentfault讲堂开设了一场关于html5+ App开发工程化实践之路，讲解了使用方法：https://segmentfault.com/l/1500000009542402?r=bPqXdU

c***@163.com (作者)

谢谢大神指导，我找到原因了，是mui.css样式有个地方引用会报错，需要注释掉

2017-07-13 14:06

7***@qq.com

我是用的npm包 import 'vue-awesome-mui/mui/dist/css/mui.min.css';
也报这个错
楼主能告知一下是哪个样式报错了吗
万分感谢！！

mfan

应该是css里面用了背景svg

7***@qq.com

谢谢确实是的

2017-08-14 14:11
c***@163.com (作者)

删除那个代码就ok了，但我现在没有mui样式了，换了vue框架的ui样式

2017-08-18 14:15

该问题目前已经被锁定, 无法添加新回复