传统上我们会在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-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，查看打包后的效果。

  1.  /*webpack.config.js*/
  2.  var path = require('path')
  3.  module.exports = {
  4.    entry: {
  5.      app: './app.js'
  6.    },
  7.    output: {
  8.      path: path.resolve(__dirname, './dist'),
  9.      publicPath: './dist/',
  10.      filename: '[name].bundle.js',
  11.      chunkFilename: '[name].chunk.js'
  12.    },
  13.    module: {
  14.      rules: [
  15.        {
  16.          test: /\.css$/,
  17.          use:[
  18.            {
  19.              loader: 'style-loader'
  20.            },
  21.            {
  22.              loader: 'css-loader'
  23.            }
  24.          ]
  25.        }
  26.      ]
  27.    }
  28.  }

app.js

  1. /*app.js*/
  2. import base from './src/css/base.css'

base.css

  1. /*base.css*/
  2. html {
  3.   background: #808080
  4. }

这是一个最简单的例子，我们在入口文件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中新增样式

  1.  ```
  2.  /*base.css*/
  3.  html {
  4.    background: #808080
  5.  }
  6.  
  7.  p {    /*新增*/
  8.    font-size: 40px
  9.  }
  10.  ```

在common.css中增加样式并在app.js中导入import common.css from './src/css/common.css'

  1.  /*common.css*/
  2.  html {
  3.    color: red
  4.  }

打包后可以看到引入的每个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

  1.  // common.css
  2.  html {
  3.    background: red
  4.  }

base.css

  1.  // base.css
  2.  html {
  3.    background: #808080
  4.  }

app.js

  1.  import base from './src/css/base.css'
  2.  import common from './src/css/common.css'
  3.  
  4.  let bgFlag = true
  5.  document.onclick = function toggleBgColor() {
  6.    if (bgFlag) {
  7.      base.use()
  8.      common.unuse()
  9.    } else {
  10.      common.use()
  11.      base.unuse()
  12.    }
  13.    bgFlag = !bgFlag
  14.  }

打包后，在浏览器中点击页面可以切换页面的背景颜色，使用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选项。

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

  1.  //style-loader添加options选项
  2.  {
  3.      loader: 'style-laoder',
  4.      options: {
  5.          attrs: {  //attrs是一个对象，以键值对出现，建议语义化
  6.              first: '1'
  7.          }
  8.      }
  9.  }

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

接下来我们给style-loader的options增加singleton属性,IE9对页面上style标签数量有严格限制，所以这个属性还是很有用的。

  1.  // webpack.config.js
  2.  use:[
  3.            {
  4.              loader: 'style-loader',
  5.              options: {
  6.                attrs: {
  7.                  first: 1
  8.                },
  9.                singleton: true
  10.              }
  11.            },
  12.            {
  13.              loader: 'css-loader'
  14.  
  15.            }
  16.          ]

可以看到，此时只有一个标签插入到文档中。common.css和base.css模块的样式被合并到一个样式标签中。

。

上面提到options选项还有insertAt属性，insertAt有两个值top | bottom,如果不配置insertAt则 默认为bottom，当insertAt： ‘top’ 时 ，loader打包的css将优先已经存在的css，insertInto插入到指定标签。

在html页面中添加新的样式

  1.  <head>
  2.    <meta charset="UTF-8">
  3.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5.    <title>demo 01</title>
  6.    <style>
  7.      html {  //背景色设置为红色
  8.        background: red
  9.      }
  10.    </style>
  11.  </head>

然后insertAt: ‘top’打包后可以发现webpack打包加载生成的标签会在标签的上方。背景色会被覆盖为红色。 
。

在html中新建<div id="app"></div> 标签，利用insertInto将打包的css插入到该div中。 

demo 04 options中的transform

  1.  options: {
  2.      transform: './src/transform.js' //值对应一个js文件
  3.  }

transform.js中导入一个函数，函数的参数是css，这时我们拿到的css样式是以字符串的形式，所以可用repalce方法修改样式，transform.js可以通过style-loader会根据需要在css未加载到页面之前修改样式，在函数中我们可以获取到浏览器的相关信息，比如window,navigator等，这有助于我们根据相关信息修改样式。在这个例子中，我们判断window的innerWidth当小于476px时，将字体由24px变为12px。当浏览器宽大于476px时加载进来的css 文本大小为24px。

  1.  // transform.js
  2.  module.exports = function(css) {
  3.    console.log(css)
  4.    console.log(window.innerWidth)
  5.  
  6.    if (window.innerWidth < 476) {
  7.      return  css.replace('24', '12')
  8.    }
  9.    return css
  10.  }

css-loader options

css-loader

less和sass

  1.  npm install less-loader less --save-dev
  2.  npm install sass-loader node-sass --save-dev

提取css

  1.  extract-loader
  2.  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. MySQL_select语句(不定时更新)

    1.SELECT语句 select if(fraction>=60 and fraction<=100,'合格','不合格') from sp_employeezzvalidate;

  2. JavaEE学习总结（十四）— 人工智能微博

    一.数据库与表 人工智能微博(blog) note(id,bt,nr);微博信息(编号,标题,内容) 列表添加 数据库脚本 /* Navicat MySQL Data Transfer Source ...

  3. 《高性能Mysql》讲聚簇索引

    <高性能Mysql>原文 聚簇索引如下图为聚簇所有的存储方式,聚簇实际不是一种索引,而是一种数据的存储方式,InnoDB的聚簇事假在同一个结构中保存了B-Tree索引和数据行. 当表有聚簇 ...

  4. python -- 进程线程协程专题

    进程专栏 multiprocessing 高级模块 要让Python程序实现多进程(multiprocessing),我们先了解操作系统的相关知识. Unix/Linux操作系统提供了一个fork() ...

  5. Python入门系列教程（一）基础

    基础知识 1.变量及类型 2.换行\n 3.输入 password = raw_input("请输入密码:") print '您刚刚输入的密码是:', password 4.格式化 ...

  6. TestNg失败重试机制

    TestNg提供了失败重试接口IRetryAnalyzer,需要实现retry方法: package com.shunhe.testngprac.retry; import org.testng.IR ...

  7. 五、u-boot 启动流程---u-boot.lds

    5.1 u-boot.lds  链接脚本分析 uboot 编译出来的第一个链接脚本就是执行 u-boot.lds 链接脚本,去掉里面无用的和没有定义的,进行分析. /* 配置头文件,自动生成的,包含芯 ...

  8. VS中空项目、win32项目、控制台程序的区别（转）

    空项目,大多数想单纯创建c++工程的新同学,打开vs后很可能不知道选择创建什么工程,这时候请相信我,空项目是你最好的选择.因为空工程不包含任何的源代码文件,接下来你只需要在相应的源代码文件夹和头文件文 ...

  9. WEB 服务器 加速缓存比较

    Nginx 相对 Apache httpd 的优点: - 轻量级,同样起web 服务,比apache 占用更少的内存及资源 - 抗并发,nginx 处理请求是异步非阻塞的,而apache 则是阻塞型的 ...

  10. [转]Linux/Windows下脚本对拍程序

    [新]简单写法 (转载自:https://blog.csdn.net/ylsoi/article/details/79824655) 要求:文件输入输出,且输入输出文件需要对应 Linux: #inc ...