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

 更新时间:2017年07月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文件是在其他目录下的,原理一样。

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

相关文章

  • Antd中单个DatePicker限定时间输入范围操作

    Antd中单个DatePicker限定时间输入范围操作

    这篇文章主要介绍了Antd中单个DatePicker限定时间输入范围操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Element Plus组件Form表单Table表格二次封装的完整过程

    Element Plus组件Form表单Table表格二次封装的完整过程

    一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下
    2022-09-09
  • 前端框架Vue.js中Directive知识详解

    前端框架Vue.js中Directive知识详解

    这篇文章主要为大家详细介绍了前端框架Vue.js中Directive知识,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue进入页面时滚动条始终在底部代码实例

    vue进入页面时滚动条始终在底部代码实例

    这篇文章主要介绍了vue进入页面时滚动条始终在底部,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • el-upload http-request使用 多个文件上传携带其他参数方式

    el-upload http-request使用 多个文件上传携带其他参数方式

    这篇文章主要介绍了el-upload http-request使用 多个文件上传携带其他参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3使用echart的两种引入方式以及注意事项说明

    vue3使用echart的两种引入方式以及注意事项说明

    这篇文章主要介绍了vue3使用echart的两种引入方式以及注意事项说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • SpringBoot+Vue 前后端合并部署的配置方法

    SpringBoot+Vue 前后端合并部署的配置方法

    这篇文章主要介绍了SpringBoot+Vue 前后端合并部署的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue+Element-ui前端实现分页效果

    vue+Element-ui前端实现分页效果

    这篇文章主要为大家详细介绍了vue+Element-ui前端实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Vue如何监测数组类型数据发生改变的(推荐)

    Vue如何监测数组类型数据发生改变的(推荐)

    这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • 详解mpvue开发小程序小总结

    详解mpvue开发小程序小总结

    这篇文章主要介绍了详解mpvue开发小程序小总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论