详解webpack和webpack-simple中如何引入css文件


Posted in Javascript onJune 28, 2017

博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simple两个东西引入css文件有点区别。

首先说一下如何在webpack中引入css文件吧。博主的webpack是最新版本,不知1.0版本的是如何,所以下面说的是2.0以后的版本。首先在命令行中新建一个vue项目,如何新建请看我之前发的一篇博文,因为在webpack中,本身就有一个css-loader,所以不需要重新去下一个css-loader,只需要下载一个style-loader即可,下载style-loader的方法是在命令行中,在你所创建的项目目录下,键入npm install style-loader --save-dev即可,--save-dev的意思是保存到你的项目里。之后在你的项目里打开build/webpack.base.conf.js文件中,在module的rules那里,加入关于css规则的代码:

详解webpack和webpack-simple中如何引入css文件

之后在App.vue文件中在style标签项目写入你想要引入的样式:

详解webpack和webpack-simple中如何引入css文件

本例引入的样式是一个名为nam.css的文件,该文件只是让页面变蓝,之后运行即可。

详解webpack和webpack-simple中如何引入css文件

再来说一下webpack-simple是如何引入css文件的。webpack-simple从名字就可以看出他是一个简化版,在webpack中即使不下载style-loader,不在webpack.base.conf.js中配置我上面说的内容也可以通过最后一个操作轻轻松松的引入css样式。但是在webpack-simple中就不行,因为他是一个简化版本,所以需要手动配置。

首先是下载webpack-simple,如上面一样操作下载。下载完后需要在该项目目录下键入npm install css-loader style-loader --save-dev,下载完后要在webpack.config.js的rules中加入一句css规则的代码

详解webpack和webpack-simple中如何引入css文件

注意,use里面的顺序不能反过来,否则会报错。

之后在src/assets/main.js文件中输入import 'css路径'即可。如:

import './assets/blue.css'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
js实现二级导航功能
Mar 03 Javascript
javascript 中的继承实例详解
May 05 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 #Javascript
Vuex利用state保存新闻数据实例
Jun 28 #Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 #Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 #Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 #Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python实现按任意键继续执行程序
2016/12/30 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
应届生程序员求职信
2013/11/05 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书