详解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实现的一个简单进度条效果实例
May 12 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
js前端对于大量数据的展示方式及处理方法
Dec 02 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程序效率优化的一些策略小结
2010/07/17 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现八皇后算法
2019/05/06 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
10个Python面试常问的问题(小结)
2019/11/20 Python
python生成并处理uuid的实现方式
2020/03/03 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
违纪检讨书
2015/01/27 职场文书
道歉的话语大全
2015/05/12 职场文书
英文辞职信范文
2015/05/13 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
董事长新年致辞
2015/07/29 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
java基础——多线程
2021/07/03 Java/Android
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL