css-loader

• 版本: v4.3.0

• options

{
  root: '/', // 类型: {String}, 默认值: /, 描述: 解析 URL 的路径，以 / 开头的 URL 不会被转译
  url: true, // 类型: {Boolean}, 默认值: true, 描述: 启用/禁用 url() 处理
  alias: {}, // 类型: {Object}, 默认值: {}, 描述: 创建别名更容易导入一些模块
  import: true, // 类型: {Boolean}, 默认值: true, 描述: 启用/禁用 @import 处理
  minimize: false, // 类型: {Boolean|Object}, 默认值: false, 描述: 启用/禁用 压缩
  sourceMap: false, // 类型: {Boolean}, 默认值: false, 描述: 启用/禁用 Sourcemap
  // camelCase: false, // 类型: {Boolean|String}, 默认值: false, 描述: 以驼峰化式命名导出类名
  importLoaders: 0, // 类型: {Number}, 默认值: 0, 描述: 在 css-loader 前应用的 loader 的数量 
  modules: true, // 类型: {Boolean}, 默认值: false, 描述: 启用/禁用 CSS 模块
  localIdentName: '[path][name]__[local]--[hash:base64:5]' // 类型: {String}, 默认值: [hash:base64], 描述: 配置生成的标识符(ident)
}

root: 解析 URL 的路径，以 / 开头的 URL 不会被转译

类型:{String},默认值:/

url: 启用/禁用 url() 处理

类型: {Boolean},默认值:true

指的是css中通过url()引入的图片等,如: background-image: url(xxxxx)

alias: 别名,创建别名更容易导入一些模块

类型: {Object},默认值:{}

import: 启用/禁用 @import 处理

类型: {Boolean},默认值:true

minimize: 启用/禁用 压缩

类型: {Boolean|Object},默认值: false

sourceMap: 启用/禁用 Sourcemap

类型: {Boolean},默认值:false

camelCase: 以驼峰化式命名导出类名

4.3.0版本: 启用后报错,先放放

类型: {Boolean|String},默认值:false

importLoaders: 在 css-loader 前应用的 loader 的数量

类型: {Number},默认值:0

modules: 启用/禁用 CSS 模块

类型: {Boolean}, 默认值:false

localIdentName: 启用/禁用 Sourcemap

类型: {Boolean},默认值:false

• 下面细说几个复杂的点:

1 alias

注意: 别名是写在resolve节点内的,与 entry,output,module,plugins,mode,devServer等同级,如:
alias可以写成任意形式,只要注意别名对应的目录或具体文件名即可.

目录:

|--src
   |--js
      |--index.js
   |--css
      |--common.css
   |--fonts
      |--test.css // 通过别名引入这个css
   |--index.html
|--webpack.config.js

webpack.config.js

mode: '',
entry:'',
output:{},
module:{},
plugins: [],
devServer{},
resolve: {
  alias: {
    "fontCss": resolve(__dirname, 'src/fonts'),
    //"../axx/bxxx/cxx":resolve(__dirname, 'src/fonts') 
  }, // 类型: {Object}, 默认值: {}, 描述: 创建别名更容易导入一些模块
}

// index.js 别名引入

import "fontCss/test.css"

2 sourceMap

设置 sourceMap 选项查询参数来引入 source map。
例如 extract-text-webpack-plugin 能够处理它们。
默认情况下不启用它们，因为它们会导致运行时的额外开销，并增加了 bundle 大小 (JS source map 不会)。此外，相对路径是错误的，你需要使用包含服务器 URL 的绝对公用路径。

{
  loader: 'css-loader',
  options: {
    sourceMap: true
  }
}

3 modules

以下是从webpack中文官网摘抄的描述内容,下面会有实测时的理解描述

摘抄内容

查询参数 modules 会启用 CSS 模块规范。
默认情况下，这将启用局部作用域 CSS。（你可以使用 :global(...) 或 :global 关闭选择器 and/or 规则。

Scope

默认情况下，CSS 将所有的类名暴露到全局的选择器作用域中。样式可以在局部作用域中，避免全局作用域的样式。
语法 :local(.className) 可以被用来在局部作用域中声明 className。局部的作用域标识符会以模块形式暴露出去。
使用 :local（无括号）可以为此选择器启用局部模式。:global(.className) 可以用来声明一个明确的全局选择器。使用:global（无括号）可以将此选择器切换至全局模式。

loader 会用唯一的标识符(identifier)来替换局部选择器。所选择的唯一标识符以模块形式暴露出去。

:local(.className) { background: red; }
:local .className { color: green; }
:local(.className .subClass) { color: green; }
:local .className .subClass :global(.global-class-name) { color: blue; }

._23_aKvs-b8bW2Vg3fwHozO { background: red; }
._23_aKvs-b8bW2Vg3fwHozO { color: green; }
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; }
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name { color: blue; }

:主要信息: 标识符被导出

exports.locals = {
  className: '_23_aKvs-b8bW2Vg3fwHozO',
  subClass: '_13LGdX8RMStbBE9w-t0gZ1'
}

建议局部选择器使用驼峰式。它们在导入 JS 模块中更容易使用。
url() 中的 URL 在块作用域 (:local .abc) 规则中的表现，如同请求模块。

file.png => ./file.png
~module/file.png => module/file.png

你可以使用 :local(#someId)，但不推荐这种用法。推荐使用 class 代替 id。 你可以使用 localIdentName 查询参数（默认 [hash:base64]）来配置生成的 ident。

实测:

webpack.config.js

{
  loader: 'css-loader',
  options: {
    ...
    modules: true,
    ...
  }
}

test.css

div{
  background-color: aqua;
}
:local(.className1) { background: black; }
:local .className2 { color: green; }
:local(.className1 .subClass1) { color: #f3f703; }
:local .className2 .subClass2 :global(.global-class-name) { color: blue; }

index.js

import {className1,className2,subClass1,subClass2} from "../fontCss/test.css"

document.querySelector('#className1').classList = className1
document.querySelector('#className2').classList = className2
document.querySelector('#subClass1').classList = subClass1
document.querySelector('#subClass2').classList = subClass2

使用步骤是:
1 webpack.config.js的css-loader启用module
2 按规则书写css
3 webpack将模块化的css编译成module模式导出
4 js中通过import导入的对象解构出对应的class名称
5 动态添加到元素的classList上

另外没搞明白 :local(.className1)和 :local .className1以及:global(.global-class-name)和:global .global-class-name的意义

通过 Composing 合并局部类名

test.cssl代码段

:local(.className) {
  background: red;
  color: yellow;
}

:local(.subClass) {
  composes: className;
  font-size: 14px;
  background: blue;
}

html代码段

...
  <div id="className">className</div>
  <div id="subClass">subClass</div>
...

index.js代码段

import {className,subClass} from "../fontCss/test.css"
document.querySelector('#className').classList = className
document.querySelector('#subClass').classList = subClass

从下面的效果图可以看出:
1 className 被编译成hash串表示的类名
2 subClass 由于合并(Composing)了 className类,编译到元素的时候会同时拥有className和subClass2个类名
3 从下图可以看出来:如果className和subClass样式发生冲突(background),那么被合并的类名里的样式将会被覆盖. 这依然遵循 "就近原则(后面优先)",因为在 style标签内,subClass被hash后的类名是在下面的

效果图

Importing: 从其他模块导入局部类名

:local(.continueButton) {
  composes: button from 'library/button.css';
  background: red;
}

:local(.nameEdit) {
  composes: edit highlight from './edit.css';
  background: red;
}

从多个模块导入

:local(.className) {
  composes: edit hightlight from './edit.css';
  composes: button from 'module/button.css';
  composes: classFromThisModule;
  background: red;
}

4 localIdentName

可以配置生成的文件或类名称

在css-loader 3.0.0+以后,localIdentName被调整到了 options.modules 内配置

{
  loader: 'css-loader',
  options: {
    ...
    modules: {
      namedExport: false,
      localIdentName: '[path][name]__[local]--[hash:base64:5]'
    },
    ...
  }
}

需要注意的是:
1 modules配置为对象时,就默认为开启了css模块化编译( modules:true),并可以添加其他的配置
2 当使用了modules模块化编译的css写法时, namedExport不能为true,否则会导致无法获取到模块化css编译出的模块