入门webpack(七)Webpack中的css-loader 和style-loader
传统上我们会在html文件中引入CSS代码,借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。
style-loader和css-loader作用是不同的。
css-loader
: 加载.css文件style-loader
:使用<style>
将css-loader内部样式注入到我们的HTML页面
css-loader
和style-loader
的options
选项
css-loader options
alias
: 解析别名importLoader(@import)
Minimize
:true or false
,是否开启css
代码压缩,比如压缩空格不换行。- modules:是否开启css-modules
style-loader && style-loader options
style-loader
分类
style-loader
:配合css-loade
r使用,以<style></style>
形式在html页面中插入css代码style-loader/url
: 以link
标签形式向html
页面中插入代码,采用这种方式需要将css-loader
变为file-loader
,但这种方式不推荐,因为如果在一个js文件中引入多个css文件会生成多个link标签,而html
每个link
标签都会发送一次网络请求,所以这种方式并不建议。style-loader/useable: 采取这种方式使用处理
css
,会有use( )
和unuse()
l两种方法,use()
开启引入样式,unuse()
不适用样式。
options
选项
-attrs: 添加自定义 attrs 到 style 标签
- insertAt
:插入位置
- insertInto
: 插入到指定dom
- singleton
:类型为布尔值,多个样式是否只生成一个<style></style>
标签。
transform
:根据给定逻辑在css
插入html
前选择指定样式(具体可参考下面实例)
准备工作
新建文件夹并安装相应loader
当前文件夹下执行 npm init
执行 npm install style-loader css-loader --save-dev
执行npm install file-loader--save-dev
(后面需要用到)
文件结构
demo 01:在js文件中引入css,查看打包后的效果。
/*webpack.config.js*/
var path = require('path')
module.exports = {entry: {app: './app.js'},output: {path: path.resolve(__dirname, './dist'),publicPath: './dist/',filename: '[name].bundle.js',chunkFilename: '[name].chunk.js'},module: {rules: [{test: /\.css$/,use:[{loader: 'style-loader'},{loader: 'css-loader'}]}]}
}
app.js
/*app.js*/
import base from './src/css/base.css'
base.css
/*base.css*/
html {background: #808080
}
这是一个最简单的例子,我们在入口文件app.js
中引入base.css
。配置文件中针对.css
文件应用了css-loader
,style-loader
,注意这里loader
的顺序不能颠倒,webpack
是自下而上解析的,只有通过css-loader
处理css
后才能通过style-loader
生成<style></style>
标签。
将打包后的app.bundle.js文件引入html可以看到背景变为灰色,并且生成了的<style></style>
标签插入到<head></head>
中
在base.css中新增样式
```
/*base.css*/
html {background: #808080
}p { /*新增*/font-size: 40px
}
```
在common.css中增加样式并在app.js中导入import common.css from './src/css/common.css'
/*common.css*/
html {color: red
}
打包后可以看到引入的每个css
文件都对应生成了一个<style></style>
标签。
接下来我们将配置文件中的style-loader
变成style-loader/url,这时css-loader需要替代为file-loader.打包后在控制台可以看到html中引入了两个<link></link>
标签。
源码参考https://github.com/TyrionJYQ/Webpack/demo 01
demo 02: 使用style-loader/useable
使用style-loader/useable
, 需配合css-loade
r(不是file-loader
)。
common.css
// common.css
html {background: red
}
base.css
// base.css
html {background: #808080
}
app.js
import base from './src/css/base.css'
import common from './src/css/common.css'let bgFlag = true
document.onclick = function toggleBgColor() {if (bgFlag) {base.use()common.unuse()} else {common.use()base.unuse()}bgFlag = !bgFlag
}
打包后,在浏览器中点击页面可以切换页面的背景颜色,使用style-loader/url配合css-loader也是生成<style></style>
标签,但是如果使用file-loader也能打包,但是在style标签中引入的是打包后的css chunks,并不能生效。
初始页面
点击一次,bgFlag === true,base.css生效,背景色为灰色。
在点击一次 bgFlag === false, 应用common.css,背景色为红色。
将css-loader变为file-loader,可以发现点击页面可以标签里的打包后的css chunks,但是这样是无法生效的。
源码参考https://github.com/TyrionJYQ/Webpack/demo 02
demo 03 使用options选项。
attrs
:attrs
是一个对象,以键值对出现,在<style></style>
标签中以key=value
出现,键值对可以自定义,但是使用时建议语义化。//style-loader添加options选项 {loader: 'style-laoder',options: {attrs: { //attrs是一个对象,以键值对出现,建议语义化first: '1'}} }
可以看到base.css
和common.css
对应的两个<style></style>
标签都被添加了first = "1"
接下来我们给style-loader
的options
增加singleton
属性,IE9
对页面上style
标签数量有严格限制,所以这个属性还是很有用的。
// webpack.config.js
use:[{loader: 'style-loader',options: {attrs: {first: 1},singleton: true}},{loader: 'css-loader'}]
可以看到,此时只有一个标签插入到文档中。common.css和base.css模块的样式被合并到一个样式标签中。
。
上面提到options选项还有insertAt属性,insertAt有两个值top | bottom,如果不配置insertAt则 默认为bottom,当insertAt: ‘top’
时 ,loader打包的css将优先已经存在的css,insertInto插入到指定标签。
在html页面中添加新的样式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo 01</title><style>html { //背景色设置为红色background: red}</style>
</head>
然后insertAt: ‘top’打包后可以发现webpack打包加载生成的标签会在标签的上方。背景色会被覆盖为红色。
。
在html中新建<div id="app"></div>
标签,利用insertInto将打包的css插入到该div中。
源码参考https://github.com/TyrionJYQ/Webpack/demo 03
demo 04 options
中的transform
options: {transform: './src/transform.js' //值对应一个js文件
}
transform.js中导入一个函数,函数的参数是css,这时我们拿到的css样式是以字符串的形式,所以可用repalce方法修改样式,transform.js可以通过style-loader会根据需要在css未加载到页面之前修改样式,在函数中我们可以获取到浏览器的相关信息,比如window,navigator等,这有助于我们根据相关信息修改样式。在这个例子中,我们判断window的innerWidth当小于476px时,将字体由24px变为12px。当浏览器宽大于476px时加载进来的css 文本大小为24px。
// transform.js
module.exports = function(css) {console.log(css)console.log(window.innerWidth)if (window.innerWidth < 476) {return css.replace('24', '12')} return css
}
注:当我们以字符串形式拿到css样式时,就可以做很多事情,这里可以参考文章:
手把手教你webpack3(7)style-loader
源码参考https://github.com/TyrionJYQ/Webpack/demo 04
css-loader options
css-loader
less和sass
npm install less-loader less --save-dev
npm install sass-loader node-sass --save-dev
提取css
extract-loader
ExtractTextWebpackPlugin
入门webpack(七)Webpack中的css-loader 和style-loader相关推荐
- 微信小程序界面设计入门课程-样式wxss中使用css课程-文本-direction 文本方向
样式wxss中使用css课程-文本-direction 文本方向 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
- 微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-size字体大小
font-size字体大小 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 基础语法 有能力管理文 ...
- 微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-style字体风格
font-style字体风格 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 基础用法 font- ...
- CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器
一.CSS作用 对页面的外观进行美化 统一网站页面的风格 实现内容和样式的分离,适合团队开发 二.CSS语法规范 三.CSS引入方式 CSS的3种样式表 书写位置的不同分为:行内样式表(行内式) ...
- webpack中处理css文件
文章目录 一.引入webpack 1. 创建如下目录文件 2. 打开本文件目录下的控制台,初始化项目 3. 安装webpack需要的包 4. 配置webpack 二. 需要引入合适的依赖来让引入css ...
- webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍 以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
- webpack中对CSS压缩
1.在终端下载相关CSS压缩插件 PS D:\Webpack\03-webpackcss> npm i -D css-minimizer-webpack-plugin //webpack5以上官 ...
- webpack中,css中打包背景图,路径报错
css-loader: //打包样式中背景图 {test: /\.(png|jpg)$/,loader: "url-loader?limit=8192&name=images/[ha ...
- 【webpack】webpack 入门教程
一.Webpack 是什么 Webpack是一种前端资源构建工具,一个静态模块打包器(module bundler) 在Wbpack看来,前端的所有资源文件( js / json / css / im ...
最新文章
- 残差网络的前世今生与原理 | 赠书
- 使用 IDEA 解决 Java8 的数据流问题,用过的都说好!!!
- Java时区切换时的需要注意
- Linux下使用MySQL——忘记root密码及修改MySQL默认编码
- mysql的explain中type取值与SQL性能优化的关系
- 合并两个有序数组(双/三指针)
- 用C语言创建多个用户,实现支持多用户在线的FTP程序(C/S)
- 强烈的打击感jinbiguandan
- php输出mysql查询结果_PHP简单获取数据库查询结果并返回JSON
- graphics | 基础绘图系统(一)——主函数plot及其参数
- Python vs Cpython
- MyBatis 处理长字段(long varchar)
- win10桌面显示计算机及网上邻居,Win10网上邻居在哪里Win10桌面显示网络图标的方法...
- SSM(Spring+SpringMVC+Mybatis) 整合
- 禁用U盘等移动设备的自动播放
- 秒懂dB、dBm、dBw的区别和计算方法
- 计算机的击键方法教学教案,学习敲击L键计算机教案
- 拍照翻译软件 拍照识别 云脉慧眼
- JAVA地铁舆情管理系统计算机毕业设计Mybatis+系统+数据库+调试部署
- linux 命令行下wlan无线网卡配置 2
热门文章
- p5.js 编程基础学习合集【2】
- 解决document.form.submit()对象不支持此属性或方法
- 【在华为做OD的日子】初出茅庐
- Hadoop2.7.2 HBase2.0.0环境搭建
- android 字体大小换算,Android单位换算与UI适配
- oracle中job_queue_processes 表,参数job_queue_processes与Oracle jobs - 一沙弥的世界
- Drupal学习资源
- visio2019专业版下载和安装包图文步骤教程
- [转]Top Five Ways SpiderLabs Got Domain Admin on Your Internal Network
- 基金学习笔记 (一)