源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[JavaScript] 用Vue-cli搭建的项目中引入css报错的原因分析

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2017-7-20 17:24:56 | 显示全部楼层 |阅读模式
本篇文章主要介绍了用Vue-cli搭建的项目中引入css报错的原因分析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧!

1.问题描述

之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错。下如图

经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可

{ 
 test: /\.css$/, 
 include: [ 
  /src/,//表示在src目录下的css需要编译 
  '/node_modules/element-ui/lib/'  //增加此项 
 ], 
 loader: 'style-loader!css-loader' 
}, 

另外说明下假如你的css文件是在src目录下的话就添加src的路径,如上图,element-ui或者mint-ui(minit-ui的我没试过,个人认为也要加上去webpack才能查找到),假如你的css文件是在其他目录下的,原理一样。

注:以上是个人在开发中遇到的一个问题以及解决方式,如有出入或者不严谨地方还请指出!希望能够帮到您。在此也非常感谢大家对脚本之家网站的支持!

回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-16 21:05:04 | 显示全部楼层
女生看了弄丢了卡萨诺的卡洛斯
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2022-11-25 05:35:54 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2022-12-24 13:34:37 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

1

主题

1386

回帖

1509

积分

金牌会员

Rank: 6Rank: 6

积分
1509
发表于 2023-6-6 13:28:07 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-13 07:01:32 | 显示全部楼层
老衲笑纳了
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

85

积分

注册会员

Rank: 2

积分
85
发表于 2023-10-19 21:41:52 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2024-5-19 03:59:33 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2024-6-25 00:05:20 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2024-7-4 07:31:44 | 显示全部楼层
啦啦啦啦啦啦啦啦!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-1-28 03:40 , Processed in 0.066514 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表