閱讀(778) 書(shū)簽贊(0) 我要糾錯(cuò)

Webpack css-loader

2023-05-22 09:17 更新

?`css-loader`? 會(huì)對(duì) ?`@import 和 url()`? 進(jìn)行處理，就像 js 解析 ?`import/require()`? 一樣。

快速開(kāi)始

如果要使用 css-loader，你需要安裝 webpack@5

首先，你需要先安裝 ?css-loader?：

npm install --save-dev css-loader

然后把 loader 引用到你 webpack 的配置中。如下所示：

file.js

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

然后運(yùn)行 webpack。

如果由于某種原因你需要將 CSS 提取為一個(gè)文件（即不要將 CSS 存儲(chǔ)在 JS 模塊中），你可能想要查看推薦示例。

配置項(xiàng)

名稱	類(lèi)型	默認(rèn)值	描述
`url`	`{Boolean\|Function}`	`true`	啟用/禁用 `url()`/`image-set()` 函數(shù)處理
`import`	`{Boolean\|Function}`	`true`	啟用/禁用 `@import` 規(guī)則進(jìn)行處理
`modules`	`{Boolean\|String\|Object}`	`{auto: true}`	啟用/禁用 CSS 模塊及其配置
`sourceMap`	`{Boolean}`	`compiler.devtool`	啟用/禁用生成 SourceMap
`importLoaders`	`{Number}`	`0`	啟用/禁用或者設(shè)置在 css-loader 前應(yīng)用的 loader 數(shù)量
`esModule`	`{Boolean}`	`true`	使用 ES 模塊語(yǔ)法
`exportType`	`{'array' \| 'string' \| 'css-style-sheet'}`	`array`	允許導(dǎo)出樣式為模塊數(shù)組、字符串或者可構(gòu)造樣式（即 `CSSStyleSheet`）

url

類(lèi)型: Boolean|Object 默認(rèn)值: true

啟用/禁用 url/image-set 函數(shù)進(jìn)行處理。如果設(shè)置為 false，css-loader 將不會(huì)解析 url 或者 image-set 中的任何路徑。還可以傳遞給一個(gè)函數(shù)基于資源的路徑動(dòng)態(tài)地控制這種行為。絕對(duì)路徑和根目錄的相對(duì) URL 現(xiàn)在會(huì)被解析(版本 4.0.0。

示例解決方案:

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

要從 node_modules 目錄（包括 resolve.modules）導(dǎo)入資源，而對(duì)于 alias，請(qǐng)加上一個(gè)前綴 ~：

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

Boolean

啟用/禁用 url() 解析。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

Object

允許過(guò)濾 url()。所有過(guò)濾的內(nèi)容 url() 都不會(huì)解析（保留編寫(xiě)時(shí)的代碼）。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: {
            filter: (url, resourcePath) => {
              // resourcePath - css 文件的路徑

              // 不處理 `img.png` url
              if (url.includes("img.png")) {
                return false;
              }

              return true;
            },
          },
        },
      },
    ],
  },
};

import

類(lèi)型: Boolean|Object 默認(rèn)值: true

啟用/禁用 @import 規(guī)則進(jìn)行處理。控制 @import 的解析。@import 中的絕對(duì) URL 會(huì)被直接移到運(yùn)行時(shí)去處理。

示例解決方案：

@import 'style.css' => require('./style.css')
@import url(style.css) => require('./style.css')
@import url('style.css') => require('./style.css')
@import './style.css' => require('./style.css')
@import url(./style.css) => require('./style.css')
@import url('./style.css') => require('./style.css')
@import url('http://dontwritehorriblecode.com/style.css') => @import url('http://dontwritehorriblecode.com/style.css') in runtime

要從 node_modules 目錄（包括 resolve.modules）導(dǎo)入樣式，而對(duì)于 alias，請(qǐng)加上一個(gè)前綴 ~：

@import url(~module/style.css) => require('module/style.css')
@import url('~module/style.css') => require('module/style.css')
@import url(~aliasDirectory/style.css) => require('otherDirectory/style.css')

Boolean

啟用/禁用 @import 解析。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          import: true,
        },
      },
    ],
  },
};

Object

名稱	類(lèi)型	默認(rèn)值	描述
`filter`	`{Function}`	`undefined`	允許過(guò)濾 `@import`

filter

類(lèi)型：Function 默認(rèn)值：undefined

允許過(guò)濾 @import。所有過(guò)濾的內(nèi)容 @import 都不會(huì)解析（保留編寫(xiě)時(shí)的代碼）。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          import: {
            filter: (url, media, resourcePath) => {
              // resourcePath - css 文件路徑

              // 不處理 `style.css` 的導(dǎo)入
              if (url.includes("style.css")) {
                return false;
              }

              return true;
            },
          },
        },
      },
    ],
  },
};

modules

類(lèi)型：Boolean|String|Object 默認(rèn)值：undefined

啟用/禁用 CSS 模塊或者 ICSS 及其配置：

undefined - 為所有匹配 /\.module\.\w+$/i.test(filename) 與 /\.icss\.\w+$/i.test(filename) 正則表達(dá)式的文件啟用 CSS 模塊。
true - 對(duì)所有文件啟用 CSS 模塊。
false - 對(duì)所有文件禁用 CSS 模塊。
string - 對(duì)所有文件禁用 CSS 模塊并設(shè)置 mode 配置項(xiàng)，你可以在這里獲得更多信息。
object - 如果沒(méi)有配置 modules.auto 則對(duì)所有文件啟用 CSS 模塊，否則 modules.auto 配置項(xiàng)則會(huì)決定其是否為 CSS 模塊，你可以在這里獲得更多信息。

該 modules 選項(xiàng)啟用/禁用 CSS 模塊規(guī)范并且設(shè)置基本的行為。

設(shè)置為 false 值會(huì)提升性能，因?yàn)楸苊饬?nbsp;CSS Modules 特性的解析，這對(duì)于使用普通 CSS 或者其他技術(shù)的開(kāi)發(fā)人員是非常有用的。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: true,
        },
      },
    ],
  },
};

Features

Scope

使用 local 值要求你指定 :global 類(lèi)。使用 global 值要求你指定 :local 類(lèi)。使用 pure 值則要求必須至少包含一個(gè)局部類(lèi)或者 id。

你可以點(diǎn)擊此處了解更多。

樣式可以在局部作用域中，避免影響全局作用域的樣式。

語(yǔ)法 :local(.className) 可以被用來(lái)在局部作用域中聲明 className。局部的作用域標(biāo)識(shí)符會(huì)以模塊形式暴露出去。

使用 :local（無(wú)括號(hào)）可以為此選擇器啟用局部模式。 :global(.className) 可以用來(lái)聲明一個(gè)明確的全局選擇器。使用 :global（無(wú)括號(hào)）可以將此選擇器切換至全局模式。

loader 會(huì)用唯一的標(biāo)識(shí)符 (identifier) 來(lái)替換局部選擇器。所選擇的唯一標(biāo)識(shí)符以模塊形式暴露出去。

: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;
}

?? 被導(dǎo)出的標(biāo)識(shí)符

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

本地選擇器推薦使用駝峰命名。它們?cè)趯?dǎo)入的 JS 模塊中更容易使用。

你也可以使用 :local(#someId)，但這并不推薦。應(yīng)該使用類(lèi)去代替 id。

Composing

聲明本地類(lèi)名時(shí)，可以從另一個(gè)本地類(lèi)名組成一個(gè)本地類(lèi)。

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

:local(.subClass) {
  composes: className;
  background: blue;
}

這不會(huì)導(dǎo)致 CSS 本身發(fā)生任何變化，但是會(huì)導(dǎo)出多個(gè)類(lèi)名。

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

._23_aKvs-b8bW2Vg3fwHozO {
  background: red;
  color: yellow;
}

._13LGdX8RMStbBE9w-t0gZ1 {
  background: blue;
}

Importing

從另一個(gè)模塊導(dǎo)入本地類(lèi)名。

我強(qiáng)烈建議您在導(dǎo)入文件時(shí)指定擴(kuò)展名，因?yàn)榭梢詫?dǎo)入具有任何擴(kuò)展名的文件，而且事先并不能知道要使用哪個(gè)文件。

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

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

要從多個(gè)模塊導(dǎo)入，請(qǐng)使用多個(gè) composes: 規(guī)則。

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

Values

可以使用 @value 來(lái)指定在整個(gè)文檔中都能被重復(fù)使用的值，

我們推薦對(duì)特定的值使用 v- 的前綴，給選擇器使用 s- 的前綴，并且為媒體規(guī)則使用 m- 前綴。

@value v-primary: #BF4040;
@value s-black: black-selector;
@value m-large: (min-width: 960px);

.header {
  color: v-primary;
  padding: 0 10px;
}

.s-black {
  color: black;
}

@media m-large {
  .header {
    padding: 0 20px;
  }
}

Boolean

啟用 CSS 模塊功能。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: true,
        },
      },
    ],
  },
};

String

啟用 CSS 模塊功能和設(shè)置 mode。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          // 使用 `local` 同使用 `modules: true` 的效果是一樣的
          modules: "global",
        },
      },
    ],
  },
};

Object

啟用 CSS 模塊功能和設(shè)置選項(xiàng)。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            mode: "local",
            auto: true,
            exportGlobals: true,
            localIdentName: "[path][name]__[local]--[hash:base64:5]",
            localIdentContext: path.resolve(__dirname, "src"),
            localIdentHashSalt: "my-custom-hash",
            namedExport: true,
            exportLocalsConvention: "camelCase",
            exportOnlyLocals: false,
          },
        },
      },
    ],
  },
};

auto

類(lèi)型：Boolean|RegExp|Function 默認(rèn)值：undefined

當(dāng) modules 配置項(xiàng)為對(duì)象時(shí)允許基于文件名自動(dòng)啟用 CSS 模塊或者 ICSS。

有效值：

undefined - 為所有文件啟用 CSS 模塊。
true - 為所有匹配 /\.module\.\w+$/i.test(filename) 和 /\.icss\.\w+$/i.test(filename) 正則表達(dá)式的文件啟用 CSS 模塊。
false - 禁用 CSS 模塊。
RegExp - 為所有匹配 /RegExp/i.test(filename) 正則表達(dá)式的文件禁用 CSS 模塊。
function - 為所有通過(guò)基于文件名的過(guò)濾函數(shù)校驗(yàn)的文件啟用 CSS 模塊。

`Boolean`

可能的值：

true - 啟用 CSS 模塊或者可交互 CSS 格式，為所有滿足 /\.module(s)?\.\w+$/i.test(filename) 條件的文件設(shè)置 modules.mode 選項(xiàng)為 local，或者為所有滿足 /\.icss\.\w+$/i.test(filename) 條件的文件設(shè)置 modules.mode 選項(xiàng)為 icss
false - 禁用 css 模塊或者基于文件名的可交互 CSS 格式

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            auto: true,
          },
        },
      },
    ],
  },
};

`RegExp`

根據(jù)正則表達(dá)式檢查文件名，為匹配的文件啟用 css 模塊。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            auto: /\.custom-module\.\w+$/i,
          },
        },
      },
    ],
  },
};

`Function`

根據(jù)過(guò)濾器檢查文件名，為滿足過(guò)濾要求的文件啟用css模塊。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            auto: (resourcePath) => resourcePath.endsWith(".custom-module.css"),
          },
        },
      },
    ],
  },
};

mode

類(lèi)型：String|Function 默認(rèn)：?'local'?

設(shè)置 mode 選項(xiàng)。需要 local 模式時(shí)可以忽略該值。

控制應(yīng)用于輸入樣式的編譯級(jí)別。

local、global 和 pure 處理 class 和 id 域以及 @value 值。 icss 只會(huì)編譯底層的 Interoperable CSS 格式，用于聲明 CSS 和其他語(yǔ)言之間的 :import 和 :export 依賴關(guān)系。

ICSS 提供 CSS Module 支持，并且為其他工具提供了一個(gè)底層語(yǔ)法，以實(shí)現(xiàn)它們自己的 css-module 變體。

`String`

可選值 - local、global、pure 和 icss。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            mode: "global",
          },
        },
      },
    ],
  },
};

`Function`

允許根據(jù)文件名設(shè)置不同的 mode 選項(xiàng)值。

可能的返回值 - local、global、pure 和 icss。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            // 回調(diào)必須返回 `local`，`global`，或者 `pure`
            mode: (resourcePath) => {
              if (/pure.css$/i.test(resourcePath)) {
                return "pure";
              }

              if (/global.css$/i.test(resourcePath)) {
                return "global";
              }

              return "local";
            },
          },
        },
      },
    ],
  },
};

localIdentName

類(lèi)型：String 默認(rèn)：?'[hash:base64]'?

允許配置生成的本地標(biāo)識(shí)符(ident)。

更多關(guān)于配置項(xiàng)的信息可以查看：

?webpack template strings?,
?output.hashDigest?,
?output.hashDigestLength?,
?output.hashFunction?,
?output.hashSalt.?

支持的模板字符串：

?[name]? 源文件名稱
?[folder]? 文件夾相對(duì)于 compiler.context 或者 modules.localIdentContext 配置項(xiàng)的相對(duì)路徑。
?[path]? 源文件相對(duì)于 compiler.context 或者 modules.localIdentContext 配置項(xiàng)的相對(duì)路徑。
?[file]? - 文件名和路徑。
?[ext]? - 文件拓展名。
?[hash]? - 字符串的哈希值?；?nbsp;localIdentHashSalt、localIdentHashFunction、localIdentHashDigest、localIdentHashDigestLength、localIdentContext、resourcePath 和 exportName 生成。
?[<hashFunction>:hash:<hashDigest>:<hashDigestLength>]? - 帶有哈希設(shè)置的哈希。
?[local]? - 原始類(lèi)名。

建議：

開(kāi)發(fā)環(huán)境使用 '[path][name]__[local]'
生產(chǎn)環(huán)境使用 '[hash:base64]'

[local] 占位符包含原始的類(lèi)。

**注意：**所有保留 (<>:"/\|?*) 和控制文件系統(tǒng)字符 (不包括 [local] 占位符) 都將轉(zhuǎn)換為 -。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentName: "[path][name]__[local]--[hash:base64:5]",
          },
        },
      },
    ],
  },
};

localIdentContext

類(lèi)型：String 默認(rèn)：compiler.context

允許為本地標(biāo)識(shí)符名稱重新定義基本的 loader 上下文。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentContext: path.resolve(__dirname, "src"),
          },
        },
      },
    ],
  },
};

localIdentHashSalt

類(lèi)型：String 默認(rèn)：undefined

允許添加自定義哈希值以生成更多唯一類(lèi)。更多信息請(qǐng)查看 output.hashSalt。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashSalt: "hash",
          },
        },
      },
    ],
  },
};

localIdentHashFunction

類(lèi)型：String 默認(rèn)值：md4

允許設(shè)置生成 class 的哈希函數(shù)。更多信息請(qǐng)查看 output.hashFunction。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashFunction: "md4",
          },
        },
      },
    ],
  },
};

localIdentHashDigest

類(lèi)型：String 默認(rèn)值：hex

允許設(shè)置生成 class 的哈希摘要。更多信息請(qǐng)查看 output.hashDigest。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashDigest: "base64",
          },
        },
      },
    ],
  },
};

localIdentHashDigestLength $#localidentHashdigestlength$

類(lèi)型：Number 默認(rèn)值：20

允許設(shè)置生成 class 的哈希摘要長(zhǎng)度。更多信息請(qǐng)查看 output.hashDigestLength。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentHashDigestLength: 5,
          },
        },
      },
    ],
  },
};

localIdentRegExp

類(lèi)型：String|RegExp 默認(rèn)：undefined

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            localIdentRegExp: /page-(.*)\.css/i,
          },
        },
      },
    ],
  },
};

getLocalIdent

類(lèi)型：Function 默認(rèn)：undefined

可以指定自定義 getLocalIdent 函數(shù)的絕對(duì)路徑，以基于不同的架構(gòu)生成類(lèi)名。默認(rèn)情況下，我們使用內(nèi)置函數(shù)來(lái)生成 classname。如果自定義函數(shù)返回 null 或者 undefined，我們將降級(jí)使用內(nèi)置函數(shù)來(lái)生成 classname。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            getLocalIdent: (context, localIdentName, localName, options) => {
              return "whatever_random_class_name";
            },
          },
        },
      },
    ],
  },
};

namedExport

類(lèi)型：Boolean 默認(rèn)：false

本地環(huán)境啟用/禁用 export 的 ES 模塊。

? 本地環(huán)境的命名將轉(zhuǎn)換為駝峰格式，即 exportLocalsConvention 選項(xiàng)默認(rèn)設(shè)置了 camelCaseOnly。

? 不允許在 CSS 類(lèi)名中使用 JavaScript 保留字。

styles.css

.foo-baz {
  color: red;
}
.bar {
  color: blue;
}

index.js

import { fooBaz, bar } from "./styles.css";

console.log(fooBaz, bar);

可以使用以下命令啟用 export 的 ES 模塊：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          esModule: true,
          modules: {
            namedExport: true,
          },
        },
      },
    ],
  },
};

可以為 namedExport 設(shè)置一個(gè)自定義名稱，可以使用 exportLocalsConvention 配置項(xiàng)作為一個(gè)函數(shù)。可前往 examples 章節(jié)查看示例。

exportGlobals

類(lèi)型：Boolean 默認(rèn)：false

允許 css-loader 從全局類(lèi)或 ID 導(dǎo)出名稱，因此您可以將其用作本地名稱。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportGlobals: true,
          },
        },
      },
    ],
  },
};

exportLocalsConvention

類(lèi)型：String|Function 默認(rèn)：取決于 modules.namedExport 選項(xiàng)值，如果為 true 則對(duì)應(yīng)的是 camelCaseOnly，反之對(duì)應(yīng)的是 asIs

導(dǎo)出的類(lèi)名稱的樣式。

`String`

默認(rèn)情況下，導(dǎo)出的 JSON 密鑰反映了類(lèi)名（即 asIs 值）。

? 如果你設(shè)置 namedExport 為 true 那么只有 camelCaseOnly 被允許。

名稱	類(lèi)型	描述
`'asIs'`	`{String}`	類(lèi)名將按原樣導(dǎo)出。
`'camelCase'`	`{String}`	類(lèi)名將被駝峰化，原類(lèi)名不會(huì)從局部環(huán)境刪除
`'camelCaseOnly'`	`{String}`	類(lèi)名將被駝峰化，原類(lèi)名從局部環(huán)境刪除
`'dashes'`	`{String}`	類(lèi)名中只有破折號(hào)會(huì)被駝峰化
`'dashesOnly'`	`{String}`	類(lèi)名中破折號(hào)會(huì)被駝峰，原類(lèi)名從局部環(huán)境刪除

file.css

.class-name {
}

file.js

import { className } from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportLocalsConvention: "camelCase",
          },
        },
      },
    ],
  },
};

`Function`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportLocalsConvention: function (name) {
              return name.replace(/-/g, "_");
            },
          },
        },
      },
    ],
  },
};

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportLocalsConvention: function (name) {
              return [
                name.replace(/-/g, "_"),
                // dashesCamelCase
                name.replace(/-+(\w)/g, (match, firstLetter) =>
                  firstLetter.toUpperCase()
                ),
              ];
            },
          },
        },
      },
    ],
  },
};

exportOnlyLocals

類(lèi)型：Boolean 默認(rèn)：false

僅導(dǎo)出局部環(huán)境。

使用 css 模塊進(jìn)行預(yù)渲染（例如 SSR）時(shí)很有用。要進(jìn)行預(yù)渲染，預(yù)渲染包應(yīng)使用 mini-css-extract-plugin 選項(xiàng)而不是 style-loader!css-loader。它不嵌入 CSS，而僅導(dǎo)出標(biāo)識(shí)符映射。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            exportOnlyLocals: true,
          },
        },
      },
    ],
  },
};

importLoaders

類(lèi)型：Number 默認(rèn)：0

允許為 @import 樣式規(guī)則、CSS 模塊或者 ICSS 啟用/禁用或設(shè)置在 CSS loader 之前應(yīng)用的 loader 的數(shù)量，例如：@import/composes/@value value from './values.css' 等。

importLoaders 選項(xiàng)允許你配置在 css-loader 之前有多少 loader 應(yīng)用于 @imported 資源與 CSS 模塊/ICSS 導(dǎo)入。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
            },
          },
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
};

當(dāng)模塊系統(tǒng)（即 webpack）支持按來(lái)源匹配 loader 時(shí)，這種情況將來(lái)可能會(huì)改變。

sourceMap

類(lèi)型：Boolean 默認(rèn)值：取決于 compiler.devtool 值

source map 的生成默認(rèn)依賴 devtool 配置項(xiàng)。除了 eval 與 false 之外的值都會(huì)啟用 source map。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          sourceMap: true,
        },
      },
    ],
  },
};

esModule

類(lèi)型：Boolean 默認(rèn)：true

默認(rèn)情況下，css-loader 生成使用 ES 模塊語(yǔ)法的 JS 模塊。在某些情況下，使用 ES 模塊是有益的，例如在模塊串聯(lián)或 tree shaking 時(shí)。

你可以使用以下方式啟用 CommonJS 模塊語(yǔ)法：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          esModule: false,
        },
      },
    ],
  },
};

exportType

類(lèi)型：'array' | 'string' | 'css-style-sheet' 默認(rèn)值：'array'

允許導(dǎo)出樣式為模塊數(shù)組、字符串或者可構(gòu)造樣式（即 CSSStyleSheet）。默認(rèn)值為 'array'，即 loader 導(dǎo)出具有特定 API 的模塊數(shù)組，用于 style-loader 或其他。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        assert: { type: "css" },
        loader: "css-loader",
        options: {
          exportType: "css-style-sheet",
        },
      },
    ],
  },
};

src/index.js

import sheet from "./styles.css" assert { type: "css" };

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

'array'

loader 導(dǎo)出具有特定 API 的模塊數(shù)組，用于 style-loader 或其他。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },
    ],
  },
};

src/index.js

// `style-loader` applies styles to DOM
import "./styles.css";

'string'

? 你不再需要 style-loader，請(qǐng)移除它。 ? 如果你想使用 CSS modules，應(yīng)該啟用 esModules 配置項(xiàng)，默認(rèn)情況下，本地變量會(huì)被具名導(dǎo)出。

默認(rèn)導(dǎo)出為 string。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: ["css-loader", "postcss-loader", "sass-loader"],
      },
    ],
  },
};

src/index.js

import sheet from "./styles.css";

console.log(sheet);

'css-style-sheet'

? 不再允許使用 @import 規(guī)則，更多信息 ? 你不再需要 style-loader，請(qǐng)移除它。 ? 如果你想使用 CSS modules，應(yīng)該啟用 esModules 配置項(xiàng)，默認(rèn)情況下，本地變量會(huì)被具名導(dǎo)出。 ? 目前在 Chrome 中不支持 Source maps，因?yàn)橛性?nbsp;bug

默認(rèn)導(dǎo)出是一個(gè) 可構(gòu)造樣式（即 CSSStyleSheet）。

對(duì) 自定義元素以及 shadow DOM 有用處。

更多信息：

Using CSS Module Scripts to import stylesheets
Constructable Stylesheets: seamless reusable styles

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        assert: { type: "css" },
        loader: "css-loader",
        options: {
          exportType: "css-style-sheet",
        },
      },

      // For Sass/SCSS:
      //
      // {
      //   assert: { type: "css" },
      //   rules: [
      //     {
      //       loader: "css-loader",
      //       options: {
      //         exportType: "css-style-sheet",
      //         // Other options
      //       },
      //     },
      //     {
      //       loader: "sass-loader",
      //       options: {
      //         // Other options
      //       },
      //     },
      //   ],
      // },
    ],
  },
};

src/index.js

// Example for Sass/SCSS:
// import sheet from "./styles.scss" assert { type: "css" };

// Example for CSS modules:
// import sheet, { myClass } from "./styles.scss" assert { type: "css" };

// Example for CSS:
import sheet from "./styles.css" assert { type: "css" };

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

對(duì)于遷移，你可以使用以下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        oneOf: [
          {
            assert: { type: "css" },
            loader: "css-loader",
            options: {
              exportType: "css-style-sheet",
              // Other options
            },
          },
          {
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  // Other options
                },
              },
            ],
          },
        ],
      },
    ],
  },
};

示例

使用 /* webpackIgnore: true */ 注釋禁用 url 解析

有了 /* webpackIgnore: true */ 注釋，可以禁用對(duì)規(guī)則和單個(gè)聲明的源處理。

/* webpackIgnore: true */
@import url(./basic.css);
@import /* webpackIgnore: true */ url(./imported.css);

.class {
  /* 對(duì) 'background' 聲明中的所有 url 禁用 url 處理 */
  color: red;
  /* webpackIgnore: true */
  background: url("./url/img.png"), url("./url/img.png");
}

.class {
  /* 對(duì) 'background' 聲明中第一個(gè) url 禁用 url 處理 */
  color: red;
  background:
    /* webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
}

.class {
  /* 對(duì) 'background' 聲明中第二個(gè) url 禁用 url 處理 */
  color: red;
  background: url("./url/img.png"),
    /* webpackIgnore: true */ url("./url/img.png");
}

/* prettier-ignore */
.class {
  /* 對(duì) 'background' 聲明中第二個(gè) url 禁用 url 處理 */
  color: red;
  background: url("./url/img.png"),
    /* webpackIgnore: true */
    url("./url/img.png");
}

/* prettier-ignore */
.class {
  /* 對(duì) 'background-image' 聲明中第三和第六個(gè) url 禁用 url 處理 */
  background-image: image-set(
    url(./url/img.png) 2x,
    url(./url/img.png) 3x,
    /* webpackIgnore:  true */ url(./url/img.png) 4x,
    url(./url/img.png) 5x,
    url(./url/img.png) 6x,
    /* webpackIgnore:  true */
    url(./url/img.png) 7x
  );
}

Assets

如下配置的 webpack.config.js 可以加載 CSS 文件，嵌入小的 PNG/JPG/GIF/SVG 圖片以及字體作為數(shù)據(jù) URL，并將較大的文件復(fù)制到輸出目錄。

對(duì)于 webpack v5：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
        // 更多信息請(qǐng)點(diǎn)擊這里 https://webpack.js.org/guides/asset-modules/
        type: "asset",
      },
    ],
  },
};

Extract

在生產(chǎn)構(gòu)建中，建議將CSS從捆綁包中提取出來(lái)，以便稍后可以并行加載CSS/JS資源。

在生產(chǎn)模式下，可以使用mini-css-extract-plugin插件來(lái)提取CSS。作為替代方案，如果希望獲得更好的開(kāi)發(fā)性能和模擬生產(chǎn)環(huán)境的CSS輸出，可以使用extract-css-chunks-webpack-plugin，它提供了一個(gè)與mini-css-extract-plugin相似但適用于熱模塊重新加載的擴(kuò)展版本。

在開(kāi)發(fā)環(huán)境中，可以實(shí)時(shí)加載真實(shí)的CSS文件，而在非開(kāi)發(fā)環(huán)境中則與mini-css類(lèi)似。

純 CSS，CSS 模塊和 PostCSS

如果項(xiàng)目中沒(méi)有純 CSS（沒(méi)有 CSS 模塊），CSS 模塊和 PostCSS，則可以使用以下設(shè)置：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // 對(duì)于 pure CSS - /\.css$/i,
        // 對(duì)于 Sass/SCSS - /\.((c|sa|sc)ss)$/i,
        // 對(duì)于 Less - /\.((c|le)ss)$/i,
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              // 每一個(gè) CSS 的 `@import` 與 CSS 模塊/ICSS 都會(huì)運(yùn)行 `postcss-loader`，不要忘了 `sass-loader` 將不屬于 CSS 的 `@import` 編譯到一個(gè)文件中
              // 如果您需要在每個(gè) CSS 的 `@import` 上運(yùn)行 `sass-loader` 和 `postcss-loader`，請(qǐng)將其設(shè)置為 `2`。
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
            options: { plugins: () => [postcssPresetEnv({ stage: 0 })] },
          },
          // 也可能是 `less-loader`
          {
            loader: "sass-loader",
          },
        ],
      },
      // 對(duì)于 webpack v5
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
        // More information here https://webpack.js.org/guides/asset-modules/
        type: "asset",
      },
    ],
  },
};

使用別名解析未解析的 URL

index.css

.class {
  background: url(/assets/unresolved/img.png);
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    alias: {
      "/assets/unresolved/img.png": path.resolve(
        __dirname,
        "assets/real-path-to-img/img.png"
      ),
    },
  },
};

Named export with custom export names

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            namedExport: true,
            exportLocalsConvention: function (name) {
              return name.replace(/-/g, "_");
            },
          },
        },
      },
    ],
  },
};

只允許可交互的 CSS 使其與 CSS Module 特性分離

下面是有關(guān)配置的示例代碼，通過(guò)為所有未匹配到 *.module.scss 命名約定文件設(shè)置 mode 選項(xiàng)，只允許使用可交互的 CSS 特性（如 :import 和 :export），而不使用其他的 CSS Module 特性。此處僅供參考，因?yàn)樵?v4 之前，css-loader 默認(rèn)將 ICSS 特性應(yīng)用于所有文件。同時(shí)，在本示例中，匹配到 *.module.scss 的所有文件都將被視為 CSS Modules。

假設(shè)項(xiàng)目中有這樣一個(gè)需求，要求 canvas 繪制使用的變量與 CSS 同步，換句話說(shuō)就是 canvas 繪制使用的顏色（在 JavaScript 中設(shè)置的顏色名）與 HTML 背景（在 CSS 中通過(guò) class 設(shè)置）相同。

webpack.config.js

module.exports = {
  module: {
    rules: [
      // ...
      // --------
      // SCSS ALL EXCEPT MODULES
      {
        test: /\.scss$/i,
        exclude: /\.module\.scss$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                mode: "icss",
              },
            },
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      // --------
      // SCSS MODULES
      {
        test: /\.module\.scss$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                mode: "local",
              },
            },
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      // --------
      // ...
    ],
  },
};

variables.scss

文件被視為僅使用 ICSS。

$colorBackground: red;
:export {
  colorBackgroundCanvas: $colorBackground;
}

Component.module.scss

文件被視為 CSS Module。

@import "variables.scss";
.componentClass {
  background-color: $colorBackground;
}

Component.jsx

在 JavaScript 中直接使用 CSS Module 的特性以及 SCSS 聲明的變量。

import svars from "variables.scss";
import styles from "Component.module.scss";

// Render DOM with CSS modules class name
// <div className={styles.componentClass}>
//   <canvas ref={mountsCanvas}/>
// </div>

// Somewhere in JavaScript canvas drawing code use the variable directly
// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
ctx.fillStyle = `${svars.colorBackgroundCanvas}`;

Contributing

如果您還沒(méi)有閱讀，請(qǐng)花一點(diǎn)時(shí)間閱讀我們的貢獻(xiàn)指南。

License

MIT

以上內(nèi)容是否對(duì)您有幫助：

← Webpack coffee-loader

Webpack exports-loader →

寫(xiě)筆記

我要補(bǔ)充

Webpack css-loader

?css-loader? 會(huì)對(duì) ?@import 和 url()? 進(jìn)行處理，就像 js 解析 ?import/require()? 一樣。

快速開(kāi)始

配置項(xiàng)

url

Boolean

Object

import

Boolean

Object

filter

modules

Features

Scope

Composing

Importing

Values

Boolean

String

Object

auto

Boolean

RegExp

Function

mode

String

Function

localIdentName

localIdentContext

localIdentHashSalt

localIdentHashFunction

localIdentHashDigest

localIdentHashDigestLength $#localidentHashdigestlength$

localIdentRegExp

getLocalIdent

namedExport

exportGlobals

exportLocalsConvention

String

Function

exportOnlyLocals

importLoaders

sourceMap

esModule

exportType

'array'

'string'

'css-style-sheet'

示例

推薦

使用 /* webpackIgnore: true */ 注釋禁用 url 解析

Assets

Extract

純 CSS，CSS 模塊和 PostCSS

使用別名解析未解析的 URL

Named export with custom export names

只允許 可交互的 CSS 使其與 CSS Module 特性分離

Contributing

License

?`css-loader`? 會(huì)對(duì) ?`@import 和 url()`? 進(jìn)行處理，就像 js 解析 ?`import/require()`? 一樣。

`Boolean`

`RegExp`

`Function`

`String`

`Function`

`String`

`Function`

純 CSS，CSS 模塊和 PostCSS

只允許可交互的 CSS 使其與 CSS Module 特性分離