传统上我们会在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)
  • Minimizetrue or false,是否开启css代码压缩,比如压缩空格不换行。
  • modules:是否开启css-modules

style-loader && style-loader options

style-loader分类

  • style-loader:配合css-loader使用,以<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> 标签。 

demo 02: 使用style-loader/useable

使用style-loader/useable, 需配合css-loader(不是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,但是这样是无法生效的。

demo 03 使用options选项。

  • attrsattrs是一个对象,以键值对出现,在<style></style>标签中以key=value出现,键值对可以自定义,但是使用时建议语义化。

 //style-loader添加options选项
{
loader: 'style-laoder',
options: {
attrs: { //attrs是一个对象,以键值对出现,建议语义化
first: '1'
}
}
}

可以看到base.csscommon.css对应的两个<style></style> 标签都被添加了first = "1"

接下来我们给style-loaderoptions增加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中。 

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-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中的css-loader 和style-loader的更多相关文章

  1. webpack中,css中打包背景图,路径报错

    css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...

  2. (4)webpack中配置css,scss,less第三方loader

    为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...

  3. Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  4. webpack中使用typescript

    概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...

  5. 如何在webpack中使用loader

    一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...

  6. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  7. 第五十篇: webpack中的loader(一) --css-loader

    好家伙, 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后,自动打开浏览器 open:ture, //在http协议中,如果端口号是80,则可以被 ...

  8. webpack中css文件的代码分割

    module.exports = { output: { filename: '[name].js', chunkFilename: '[name].chunk.js', path: path.res ...

  9. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

  10. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

随机推荐

  1. Microsoft JET Database Engine 错误 '80004005' 未指定错误

    Microsoft JET Database Engine 错误 '80004005'未指定错误 =====解决=======出现这种“未指定错误”时,可以尝试重新注册ASP脚本解释链接库文件在CMD ...

  2. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  3. git杂记:忽略ssl认证

        当你通过HTTPS访问Git远程仓库,如果服务器的SSL证书未经过第三方机构签署,那么Git就会报错.这是十分合理的设计,毕竟未知的没有签署过的证书意味着很大安全风险.但是,如果你正好在架设G ...

  4. mac java jdk 安装删除

    安装: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载安装双击安装 卸载: ...

  5. conda常用命令总结

    conda 一些背景历史以及如何安装这里就不说了,因为实在是漫天都在飞,随便都能找到相关的资料.我这里只是将平时常用到的 Conda 命令进行汇总,以备不时之需,因为我也是一个忘性极大的人,实在是记不 ...

  6. 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表'Address'中的标识列指

    在有自增长的SQL表格里面插入指定ID的数据的时候,会禁止你操作,提示如题目,解决办法: set identity_insert address on ,,,) set identity_insert ...

  7. POJ - 3267 The Cow Lexicon(动态规划)

    https://vjudge.net/problem/POJ-3267 题意 给一个长度为L的字符串,以及有W个单词的词典.问最少需要从主串中删除几个字母,使其可以由词典的单词组成. 分析 状态设置很 ...

  8. Storm WordCount Topology学习

    1,分布式单词计数的流程 首先要有数据源,在SentenceSpout中定义了一个字符串数组sentences来模拟数据源.字符串数组中的每句话作为一个tuple发射.其实,SplitBolt接收Se ...

  9. linux 更改文件夹所有者

    更改“tp5”文件的所有者为”www” chown -R tp5/ www 修改目录及其子目录的用户组为“www” chgrp -R www tp5 同时更改文件或目录的所有者和用户组 chown - ...

  10. 20155332 2006-2007-2 《Java程序设计》第4周学习总结

    20155332 2006-2007-2 <Java程序设计>第4周学习总结 教材学习内容总结 理解封装.继承.多态的关系 理解抽象类与接口的区别 掌握S.O.L.I.D原则 了解模式和设 ...