vue.js 项目怎么引入 CSS 报错? 用 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 文件是在其他目录下的, 原理一样.
注: 以上是个人在开发中遇到的一个问题以及解决方式, 如有出入或者不严谨地方还请指出! 希望能够帮到您.
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17181.html