(转)webpack和webpack-simple区别(如何引入css文件)
博主最近研究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规则的代码:
之后在App.vue文件中在style标签项目写入你想要引入的样式:
本例引入的样式是一个名为nam.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规则的代码
注意,use里面的顺序不能反过来,否则会报错。
之后在src/assets/main.js文件中输入import 'css路径'即可。如:
import './assets/blue.css'
(转)webpack和webpack-simple区别(如何引入css文件)的更多相关文章
- 引入css文件时,css link和@import区别
这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径&q ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- jquery,js引入css文件,js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
- vue中引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- 如何使用Jquery 引入css文件
如何使用Jquery 引入css文件: $("head").append("<link>");var toolbarCss = $("he ...
- vue中如何引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- 引入CSS文件的方式,以及link与@import的区别
一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...
- html引入css文件
在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...
随机推荐
- mysql 开源 ~ canal+otter系列(1)
一 简介: 今天咱们来聊聊 canal和otter的组合搭配吧二 概念统计 1. 基于Canal开源产品,获取数据库增量日志数据. 2. 典型管理系统架构,manager(web管理)+nod ...
- Android插件化技术简介
https://blog.csdn.net/io_field/article/details/79084630 可以通过反射 事先定义统一接口的方式,访问插件中的类和方法 还可以在AndroidMan ...
- python,<一>读取文件open()
在实际操作中,我们经常会读取文件,这个时候python为我们提供了一个open()的方法,供我们读取文件,通过help(open),我们可以获取open的方法 f.close()关闭读取 f.read ...
- Linux系统启动那些事—基于Linux 3.10内核【转】
转自:https://blog.csdn.net/shichaog/article/details/40218763 Linux系统启动那些事—基于Linux 3.10内核 csdn 我的空间的下载地 ...
- linux驱动 之 module_init解析 (上)【转】
转自:https://blog.csdn.net/Richard_LiuJH/article/details/45669207 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- linux配置supervisor
linux配置supervisor 安装 pip install supervisor 生成配置文件 使用 echo_supervisord_conf > /etc/supervisord.co ...
- liunx中的iptables
作者:邓聪聪 iptables的入站端口放行策略: iptables -A INPUT -A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT ...
- 学习awk命令的使用
作者:邓聪聪 awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理,然后输出 awk命令形式: ...
- This project is not a myeclipse hibernate project . Assuming Hibernate 3 capabilities configuration editor
开某工程Hibernate配置文件时出现提示,信息大概如标题. 根据网友提供,选中工程,点击MyEclipse-->Project capabilities-->add hibernate ...
- 029_mount bind挂载
一. 由于公司的配置标准并不统一,交付的磁盘挂载的路径不是想要的路径,但是 1./home目录下有很重要的堡垒机登录的相关文件,还不能卸载 2.我通过pts/0登录的,这个文件描述符也是在/home目 ...