(转)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 ...
随机推荐
- 1Mybatis入门--1.1单独使用jdbc编程问题总结
1.1.1 jdbc程序 Public static void main(String[] args) { Connection connection = null; PreparedStatemen ...
- django 学习手册 - ORM 报错集(随时更新)
报错问题: 问题一:(1050代码) django.db.utils.InternalError: (1050, "Table 'app01_group' already exists&qu ...
- HashMap、Hashtable、ConcurrentHashMap面试总结
原文链接:https://www.cnblogs.com/hexinwei1/p/10000779.html 小总结 HashMap.Hashtable.ConcurrentHashMap HashM ...
- [转载]Tensorflow 的reduce_sum()函数的axis,keep_dim这些参数到底是什么意思?
转载链接:https://www.zhihu.com/question/51325408/answer/125426642来源:知乎 这个问题无外乎有三个难点: 什么是sum 什么是reduce 什么 ...
- RabbitMQ简单应用の主题模式(topic)
Topic exchange(主题转发器) 发送给主题转发器的消息不能是任意设置的选择键,必须是用小数点隔开的一系列的标识符.这些标识符可以是随意,但是通常跟消息的某些特性相关联.一些合法的路由选择键 ...
- 手写代码注意点--java.util.Stack相关
1-Stack的基本函数为: 注意: 取栈顶的函数为peek(),不是top()... 测试stack是否为空的函数为empty(),不是isEmpty()...
- Springboot Session集群处理
在集群环境下,常见的基于Session的身份认证就会有一个问题,因为Session是跟着服务器走的,当用户在服务器1登陆成功后,当用户在访问服务器2的时候会因为服务器2没有用户的身份信息而再次跳转到认 ...
- 20165231 2017-2018-2 《Java程序设计》第9周学习总结
教材学习内容总结 第十三章 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符(Uniform Resource Locator),使用URL创建对象的应用程 ...
- Java基础1-Java概述;jdk安装配置
计算机基本概念 windows : desktop系统. linux : 稳定性 + 安全性. centos . ubuntu.redhat.suse mac : 路径: 精准定位 目录: 所在的文件 ...
- MySQL索引调优【转】
一.关于查询计划 其实,关于所有的关系型数据库中,在运行T-SQL语句的时候,在查询器进行编译运行的同时,都会有着自己的内部的一个优化过程,而这优化之后的产物就是:执行计划. 在SQL SERVER中 ...