目录
Webpack 2.2 中文文档
css-loader
安装
npm install --save-dev css-loader
用法
通过 webpack 配置,CLI或内联使用 loader。
通过 webpack 配置 (推荐)
webpack.config.js
module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }
在你的程序中
import css from 'file.css';
CLI
webpack --module-bind 'css=style-loader!css-loader'
在你的程序中
import css from 'file.css';
内联
在你的程序中
import css from 'style-loader!css-loader!./file.css';
选项
@import 和 url() 被当做成 import 并且会被 css-loader 解析. 比较好的 loaders 对于请求你的生产资源是 file-loader 和 url-loader 并且指定相应的配置 (见下文).
兼容现有的 css 文件 (当不是在 css 模块模式):
- url(image.png) => require(‘./image.png’)
- url(~module/image.png) => require(‘module/image.png’)
选项
名称 | 默认值 | 描述 |
---|---|---|
root |
/ |
解析 URLs 路径, URLs 以 / 开头将不会被翻译 |
modules |
false |
启用/禁用 css-modules 模式 |
import |
true |
启用/禁用 @import 处理 |
url |
true |
启用/禁用 url() 处理 |
minimize |
true |
启用/禁用 压缩 |
sourceMap |
false |
启用/禁用 Sourcemaps |
camelCase |
false |
导出以驼峰化命名的类名 |
importLoaders |
0 |
在 css-loader 前应用的 loader 的数 |
此 webpack 配置可以加载 CSS 文件,嵌入小的 png 图像数据的 url 和 JPG 图像文件。
webpack.config.js
module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.png$/, use: { loader: 'url-loader', options: { limit: 100000 } }, }, { test: /\.jpg$/, use: [ 'file-loader' ] } ] } };
Root
对于以一个 / 开头的 URLs,默认行为是不翻译:
- url(/image.png) => url(/image.png)
如果设置了 root 参数,那么 root 参数将被添加到 URL 前面,然后被翻译:
webpack.config.js
rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { root: '.' } } ] } ]
- url(/image.png) => require(‘./image.png’)
不建议使用 ‘Root-relative’ urls,您应该只将其用于旧版 CSS 文件。
CSS 作用域
默认情况下,CSS将所有的类暴露到全局的选择器作用域中。样式可以在局部作用域中,避免全局作用域的样式。
语法 :local(.className) 可以被用来在局部作用域中声明 className。局部的作用域标识符会以模块形式暴露出去。
使用 :local (无括号)可以为此选择器启用局部模式。 :global(.className)可以用来声明一个明确的全局选择器。使用:global(无括号)可以为此选择器打开全局模式。
加载器会用唯一的标识符来替换局部选择器。所选择的唯一标识符以模块形式暴露出去。
app.css
:local(.className) { background: red; } :local .className { color: green; } :local(.className .subClass) { color: green; } :local .className .subClass :global(.global-class-name) { color: blue; }
app.bundle.css
._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() URLs 在块作用域 (:local .abc) 规则中的表现像模块中的请求。
- ./file.png instead of file.png
- module/file.png instead of ~module/file.png
你可以使用 :local(#someId),但它不被推荐。推荐用 class 代替 id。
你可以使用 localIdentName 查询参数(默认 [hash:base64])来配置生成的 ident。
webpack.config.js
{ test: /\.css$/, use: [ { loader: 'css-loader', options: { modules: true, localIdentName: '[path][name]__[local]--[hash:base64:5]' } } ] }
您还可以指定自定义 getLocalIdent 函数的绝对路径,以根据不同的模式生成类名。注意这需要 webpack >= v2.x. 因为能够传递函数。示例:
{ test: /\.css$/, use: [ { loader: 'css-loader', options: { modules: true, localIdentName: '[path][name]__[local]--[hash:base64:5]', getLocalIdent: (context, localIdentName, localName, options) => { return 'whatever_random_class_name' } } } ] }
注意: 对于使用extract-text-webpack-plugin预呈现,你应该在 在预渲染 bundle 中 使用css-loader / locals而不是style-loader!css-loader。它不嵌入CSS,但只导出标识符映射。
CSS 模块
查询参数模块启用 CSS 模块 规范。
这将默认启用本地作用于 CSS。(您可以使用:global(…) 或 :global选择器或/和规则将其关闭。)
组合 CSS
当声明一个本地类名时,你可以从另一个本地类名组合成一个本地类。
:local(.className) { background: red; color: yellow; } :local(.subClass) { composes: className; background: blue; }
这不会更改 CSS 本身,但可以导出更多的类名。
exports.locals = { className: '_23_aKvs-b8bW2Vg3fwHozO', subClass: '_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO' }
._23_aKvs-b8bW2Vg3fwHozO { background: red; color: yellow; } ._13LGdX8RMStbBE9w-t0gZ1 { background: blue; }
导入本地 CSS
从其他模块导入本地类名:
:local(.continueButton) { composes: button from 'library/button.css'; background: red; }
:local(.nameEdit) { composes: edit highlight from './edit.css'; background: red; }
要从多个模块导入,请使用多个 composes: 规则。
:local(.className) { composes: edit hightlight from './edit.css'; composes: button from 'module/button.css'; composes: classFromThisModule; background: red; }
SourceMaps
包含 Sourcemaps 的,设置 sourceMap查询参数。
即 extract-text-webpack-plugin 可以处理它们。
默认情况下不启用它们,因为它们暴露了运行时的开销并增加了 bundle 的大小 (JS SourceMap 不会)。此外,相对路径是错误的,您需要使用包含服务器 URL 的绝对公用路径。
webpack.config.js
{ test: /\.css$/, use: [ { loader: 'css-loader', options: { sourceMap: true } } ] }
ImportLoaders
应用于 @import 资源的 loaders 的查询参数 importLoaders 允许配置。
importLoaders: 在 css-loader 之后的许多 loaders 用于导入资源。
webpack.config.js
{ test: /\.css$/, use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }
当模块系统 (即 webpack) 支持通过源的 loader 匹配时,这可能在将来会改变。
最小化
默认情况下,css-loader 是通过特定的模块系统来进行压缩 css 的。
某种情况下,压缩 css 是具有破坏性的,所以可以提供一些可选项。cssnano 被用来进行压缩,并且它具有一个可配置项列表.
也可以通过设置 查询参数minimize 的禁用或者启用来进行压缩。
webpack.config.js
{ test: /\.css$/, use: [ { loader: 'css-loader', options: { minimize: true || {/* CSSNano Options */} } } ] }
CamelCase
默认情况下,导出 JSON 键值对形式的类名。如果想要 camelize 类名(在 JS 中应用),通过设置 css-loader 的查询参数 camelCase 即可实现。
webpack.config.js
{ test: /\.css$/, use: [ { loader: 'css-loader', options: { camelCase: true } } ] }
.class-name {}
import { className } from 'file.css';
维护人员
Tobias Koppers
原文:https://webpack.js.org/loaders/css-loader/
上一篇: coverjs-loader 下一篇: exports-loader