详解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的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
vue权限问题的完美解决方案
May 08 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
实现vuex原理的示例
Oct 21 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 用sock技术发送邮件的函数
2007/07/21 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
简单了解Python中的几种函数
2017/11/03 Python
python监控键盘输入实例代码
2018/02/09 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python IDLE清空窗口的实例
2018/06/25 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
什么是servlet链?
2014/07/13 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python