CSS-LOADER配置详解

时间  2019-11-16
标签 css loader 配置 详解 栏目 CSS 繁體版
原文   原文链接

CSS-LOADER配置详解

前注：

文档全文请查看 根目录的文档说明。css

若是能够，请给本项目加【Star】和【Fork】持续关注。html

有疑义请点击这里，发【Issues】。vue

一、概述

对于通常的css文件，咱们须要动用三个loader（是否是以为好麻烦）；webpack

一、css-loader：git

先附上官网文档（中文）的连接：css-loader文档。github

不过说实话，这个官方文档讲的很糟糕，看的人一脸懵逼。web

css-loader主要用于处理图片路径（其实也包括例如导入css文件的路径），而且会将css样式打包进js文件中（以模块的形式打包导入）；bash

但问题在于，他不会将这些代码插入html中，所以还须要经过例如style-loader来实现将打包好的css代码插入html文件中。服务器

二、style-loader：app

一样先附上官网文档（中文）的连接：style-loader文档

基本用法：

用于将 css-loader 打包好的css模块，插入到html文件中，变成一个 <style>标签；

三、file-loader：

file-loader文档

基本用法：

用于处理各类资源文件，通常是图片，否则图片是没办法被同时打包的。

二、css-loader配置详解

先吐槽一波，中文文档里的说明，真的是描述的一点都不清楚。

2.一、root

名称 类型 默认值 描述
root {String} / 解析 URL 的路径，以 / 开头的 URL 不会被转译

官方文档里对这个解释不够严谨。

首先，假如不设置设个属性，若是理解为，以 / 开头的url不会被转译，从结果来看，也不算错；

然而，假如设置这个属性的话，那么就不同了。

在面对图片路径时，这个属性有三种状况：

  1. 当不设置这个属性的时候，css-loader不会去解析以/开头的图片路径，也不会报错；
  2. 当设置这个属性的时候，即便你设置其值为默认值 /，css-loader也会去尝试解析这个路径，若是找不到对应的图片，会报错；
  3. 当设置这个属性的值为非默认值，和【2】中的行为是同样的，css-loader去尝试解析这个路径，若是找到图片，则正常解析，找不到，会报错；

当设置这个属性时，是指，当url以 ``/``为开头时，到底去找哪里的文件夹做为解析以 ``/``为开头的url路径的文件；

当面对css文件路径时，即在css文件里，经过 @import 引入css文件时，这个是不对css文件的路径生效的（即便找不到，也不会报错）。

示例：

文件树：

根目录
|-- src
| |-- app.js
| |-- src
|   |-- logo.png
|
|-- static
| |-- abc.png
|
|-- webpack.config.js
复制代码

那么在 webpack.config.js 里配置的时候，应该这么写：root: __dirname + '/static/'。

__dirname 表示根目录的绝对路径。假如根目录的路径是 D:/abc/def，那么 __dirname 就表示 D:/abc/def ，而 __dirname + '/static/ 则表示 D:/abc/def/static

这就是告诉 css-loader ，碰见 / 开头的url路径，你应该去 D:/abc/def/static 这个路径下去找文件。

2.二、

名称 类型 默认值 描述
url {Boolean} true 启用/禁用 url() 处理

首先，咱们已知，css-loader 正常会解析css属性里的图片url路径，例如 background: url('/logo.png') 里面的值。

那么，假如某图片不在你的工程里，而是在服务器上。

而你是能够预知打包后的html文件和这个图片的相对路径关系，你就能够直接写那个时候的路径，并将url设置为false。

可是，若是设置为false，那么全部url都不会进行转义了（也不会触发file-loader），天然也不会报错（即便图片不存在）。

示例：

假如打包后，上传到服务器的目录为：

dist
|-- app.js
|-- logo.png
复制代码

那么你若是想引用 logo.png ，那么把 url 设置为 false 以后，而后路径这么写就好了 background: url('./logo.png')。

2.三、alias

名称 类型 默认值 描述
alias {Object} {} 建立别名更容易导入一些模块

说实话我本身捣鼓了半天也没完全搞明白其原理，可是琢磨出來一些用法：

一、对图片路径生效

假如文件结构：

根目录
|--static
|  |-- logo.png
|-- webpack.config.js
复制代码

解释：

  1. 已知： 图片放在 /static 目录下；
  2. 已知：不确认css文件放在哪里（由于模块化，方便移动，因此可能更改模块的目录结构）；
  3. 需求：我想要确保个人css文件必然能引用到这个图片，即便更改模块的文件路径，也不影响（不须要我二次去修改）；
  4. 行动：那么添加 css-loader 的属性，设置以下：alias: {'@': __dirname + '/static/'} ;
  5. 行动：在css文件里，图片以下引用 background: url(~@/logo.png)；
  6. 结果：我就能够确保必然css文件必然能引用到这个图片了；
  7. 注意： @ 前要加 ~ 让 webpack 识别（~ 是 webpack 负责识别，认为是根目录，而 @ 是 css-loader 负责）；

二、对 @import 引入的css文件无效；

假如文件结构：

根目录
|--static
|  |-- style.css
|  |-- foo.css
|-- webpack.config.js
复制代码

解释：

  1. 文件目录结构如上；
  2. 在 style.css 若是经过 @import '~@/foo.css' 来导入；
  3. 即便在 webpack.config.js 里这么设置 alias: {'@': __dirname + '/src/style/'} 也是没有用的；

三、解决场景：

这个能够应用的场景挺多，不过如今不少是经过webpack的别名通用配置来解决

  1. css文件和图片文件分离；
  2. 也能够分类摆放图片（例如@开头的是风景类图片，peopel开头的是人物图片）；
  3. 记得在别名以前加一个波浪线~让webpack识别，不然没法正常工做；

2.四、import

名称 类型 默认值 描述
import {Boolean} true 启用/禁用 @import 处理
  1. 假如你经过@import导入的是某个打包后工程所在位置的css文件；
  2. 即该文件不在打包前的工程里（例如CDN）；
  3. 那么这个就有用；
  4. 表现效果@import导进来的css没有被打包，只是单纯的引入了（该@import代码被直接放在style标签里）；
  5. 你能够查看dist/index.html的style标签来深入了解；

这里给一个简单的示例：

webpack打包前：

// foo.css
@import 'http://abc.com/m.css'
复制代码

webpack打包后：

// html文件（假设使用了style-loader把css经过style标签插入）
<style>
@import 'http://abc.com/m.css'
</style>
复制代码

2.五、minimize

名称 类型 默认值 描述
minimize {Boolean|Object} false 启用/禁用 压缩
  1. 这个很好理解，本来写css文件的时候，咱们各类换行空格，这个改成true以后，换行和空格就去掉了；

  2. 通常开发的时候，取环境变量，当环境变量为生产环境的时候，设置为true；开发环境的时候，设置为false；

  3. 关于生产环境的配置，能够查看参考示例，搜索 minimize 便可；

压缩前代码：

* {
    margin: 0;
    border: 0;
    padding: 0;
}

.box {
    border-radius: 150px;
}
复制代码

压缩后代码：

*{margin:0;border:0;padding:0}.box{border-radius:150px}
复制代码

2.六、sourceMap

名称 类型 默认值 描述
sourceMap {Boolean} false 启用/禁用 Sourcemap

  1. 在 minimize 设置为 true 后，css代码被压缩了，那么若是咱们要调试的话就很麻烦；
  2. 当 sourceMap 设置为 true 后，经过Chrome控制台的 Sources 标签，在左边栏上面选 Sources ，能够在树结构的 (no domain) 里，查看到压缩后和压缩前的CSS代码；
  3. 即便 minimize 没有设置为 true （不压缩），因为css代码被扔到了js里，所以也是没法直接查看咱们写的css代码的；
  4. 可是 sourceMap 设置为true后，就能够经过【2】中描述的途径来查看咱们写的css代码；

启用 sourceMap 压缩前的代码：

https://github.com/qq20004604/webpack-study/blob/master/5%E3%80%81Loader/css_loader/01.png

启用 sourceMap 压缩后的代码：

https://github.com/qq20004604/webpack-study/blob/master/5%E3%80%81Loader/css_loader/02.png

2.七、importLoaders

名称 类型 默认值 描述
importLoaders {Number} {Number} 在 css-loader 前应用的 loader 的数量

说实话，加不加这个，感受没啥区别（我还专门研究了一波postcss和autoprefixer让他生效。

见我关于postcss的配置，为了正常运行，我在项目里webpack把这个注释掉了，能够取消掉注释 // importLoaders: 0 // 感受没什么用

若是有看法，欢迎指正

2.八、modules等

名称 类型 默认值 描述 说明
modules {Boolean} false 启用/禁用 CSS 模块 一、初步理解：这个至关于把css视为模块。例如我有一个css文件 foo.css ，而后里面有一个类 .bar，我能够在js文件里经过 import foo from './foo.css'导入这个css文件；

二、在打包后，foo.css里的类 .bar 会变成具备惟一性的一个字符串（举个例子假设他变成了abcdefg）；

三、假如我在html里使用的是class='bar'，那么显然是没法正常生效的（bar被转为了abcdefg）；

四、那么我可使用变量foo.bar（在js这里，这是一个变量），赋给本来使用class='bar'的这个DOM节点；

五、因为是变量，因此他的值事实上已经被css-loader转为了abcdefg，能够正常运行了；

六、推荐阮一峰的博客CSS Modules 用法教程
camelCase {Boolean|String} false 以驼峰化式命名导出类名 一、这个须要结合modules来看，在modules设置为true时，咱们能够经过变量名来获取改名后的css类名；

二、但咱们写css类名的时候，通常是例如foo-bar这种写法，在js里显然不合适；

三、所以把这个启用为true，咱们就可使用fooBar这种驼峰式写法了，方便js引用；
localIdentName {String} [hash:base64] 配置生成的标识符(ident) 一、这个也是跟modules相关的，用于对本来混算复杂不具备可读性的类名，进行重命名；

二、我以为这个文章讲这个比较好，你真的知道 css-loader 怎么用吗？，搜索关键词：localIdentName

这三个是一块儿使用的的，见表格内容吧。

三、项目地址

github.com/qq20004604/… ，请 Star 和 fork 到本地后，注意相关配置。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程