webpack loader css,css-loader
安装
npm install --save-dev css-loader
用法
css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。
引用资源的合适 loader 是 file-loader和 url-loader，你应该在配置中指定(查看如下设置)。
file.js
import css from 'file.css';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
你也可以直接将 css-loader 的结果作为字符串使用，例如 Angular 的组件样式。
webpack.config.js
{
test: /\.css$/,
use: [
'to-string-loader',
'css-loader'
]
}
或者
const css = require('./test.css').toString();
console.log(css); // {String}
如果有 SourceMap，它们也将包含在字符串结果中。
如果由于某种原因，你需要将 CSS 提取为纯粹的字符串资源(即不包含在 JS 模块中)，则可能需要查看 extract-loader。
例如，当你需要将 CSS 作为字符串进行后处理时，这很有用。
webpack.config.js
{
test: /\.css$/,
use: [
'handlebars-loader', // handlebars loader expects raw resource string
'extract-loader',
'css-loader'
]
}
选项
名称
类型
默认值
描述
{String}
/
解析 URL 的路径，以 / 开头的 URL 不会被转译
{Boolean}
true
启用/禁用 url() 处理
{Object}
{}
创建别名更容易导入一些模块
{Boolean}
true
启用/禁用 @import 处理
{Boolean}
false
启用/禁用 CSS 模块
{Boolean\|Object}
false
启用/禁用 压缩
{Boolean}
false
启用/禁用 Sourcemap
{Boolean\|String}
false
以驼峰化式命名导出类名
{Number}
0
在 css-loader 前应用的 loader 的数量
localIdentName
{String}
[hash:base64]
配置生成的标识符(ident)
root
对于以 / 开头的 URL，默认行为是不转译它们。
url(/image.png) => url(/image.png)
如果设置了 root 查询参数，那么此查询参数将被添加到 URL 前面，然后再进行转译。
webpack.config.js
{
loader: 'css-loader',
options: { root: '.' }
}
url(/image.png) => require('./image.png')
不建议使用'相对根路径'的 url。你应该只将其用于旧版 CSS 文件。
url
要禁用 css-loader 解析 url()，将选项设置为 false。
与现有的 css 文件兼容(如果不是在 CSS 模块模式下)。
url(image.png) => require('./image.png')
url(~module/image.png) => require('module/image.png')
alias
用别名重写你的 URL，在难以改变输入文件的url 路径时，这会很有帮助，例如，当你使用另一个包(package)(如 bootstrap, ratchet, font-awesome 等)中一些 css/sass 文件。
css-loader 的别名，遵循与webpack 的 resolve.alias 相同的语法，你可以在resolve 文档 查看细节
file.scss
@charset "UTF-8";
@import "bootstrap";
webpack.config.js
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
alias: {
"../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"
}
}
},
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve("./node_modules/bootstrap-sass/assets/stylesheets")
]
}
}
]
}
import
要禁用 css-loader 解析 @import，将选项设置为false
@import url('https://fonts.googleapis.com/css?family=Roboto');
⚠️ 谨慎使用，因为这将禁用解析所有 @import，包括 css 模块 composes: xxx from 'path/to/file.css' 功能。
查询参数 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
```js
{
test: /.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
你还可以通过自定义 `getLocalIdent` 函数来指定绝对路径，以根据不同的模式(schema)生成类名。这需要 `webpack >= 2.2.1`(`options` 对象支持传入函数)。
**webpack.config.js**
```js
{
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，但只导出标识符映射(identifier map)。
Composing
当声明一个局部类名时，你可以与另一个局部类名组合为一个局部类。
: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;
}
Importing
从其他模块导入局部类名。
: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;
}
minimize
默认情况下，如果模块系统指定，css-loader 将压缩 css。
在某些情况下，压缩对于 css 来说是破坏性的，所以如果需要设置，可以向基于 cssnano 的 minifier(cssnano-based minifier) 提供自己的选项。更多可用信息请查看 cssnano 文档。
还可以使用 minimize 查询参数，来禁用或强制压缩。
webpack.config.js
{
loader: 'css-loader',
options: {
minimize: true || {/* CSSNano Options */}
}
}
sourceMap
设置 sourceMap 选项查询参数来引入 source map。
例如 extract-text-webpack-plugin 能够处理它们。
默认情况下不启用它们，因为它们会导致运行时的额外开销，并增加了 bundle 大小 (JS source map 不会)。此外，相对路径是错误的，你需要使用包含服务器 URL 的绝对公用路径。
webpack.config.js
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
camelCase
默认情况下，导出 JSON 键值对形式的类名。如果想要驼峰化(camelize)类名(有助于在 JS 中使用)，通过设置 css-loader 的查询参数 camelCase 即可实现。
名称
类型
描述
true
{Boolean}
类名将被骆驼化
'dashes'
{String}
只有类名中的破折号将被骆驼化
'only'
{String}
在 0.27.1 中加入。类名将被骆驼化，初始类名将从局部移除
'dashesOnly'
{String}
在 0.27.1 中加入。类名中的破折号将被骆驼化，初始类名将从局部移除
file.css
.class-name {}
file.js
import { className } from 'file.css';
webpack.config.js
{
loader: 'css-loader',
options: {
camelCase: true
}
}
importLoaders
查询参数 importLoaders，用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。
webpack.config.js
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1 // 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
}
},
'postcss-loader',
'sass-loader'
]
}
在模块系统(即 webpack)支持原始 loader 匹配后，此功能可能在将来会发生变化。
示例
资源
以下 webpack.config.js 可以加载 CSS 文件，将小体积 PNG/JPG/GIF/SVG 图像转为像字体那样的 Data URL 嵌入，并复制较大的文件到输出目录。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
}
提取
对于生产环境构建，建议从 bundle 中提取 CSS，以便之后可以并行加载 CSS/JS 资源。可以通过使用 extract-text-webpack-plugin 来实现，在生产环境模式运行中提取 CSS。
webpack.config.js
const env = process.env.NODE_ENV
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: env === 'production'
? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader' ]
})
: [ 'style-loader', 'css-loader' ]
},
]
},
plugins: env === 'production'
? [
new ExtractTextPlugin({
filename: '[name].css'
})
]
: []
}
维护人员