详解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 相关文章推荐
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
jquery easyui使用心得
Jul 07 Javascript
Uploadify上传文件方法
Mar 16 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
webpack之devtool详解
Feb 10 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php&mysql 日期操作小记
2012/02/27 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php把数组值转换成键的方法
2015/07/13 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
如何通过命令行进入python
2020/07/06 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
工商企业管理实习自我鉴定
2013/12/04 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
初三新学期计划书
2014/05/03 职场文书
慰问信格式规范
2015/03/23 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书