[关闭]
@Dale-Lin 2022-03-18T11:57:35.000000Z 字数 554 阅读 343

styleLoader

webpack5

style-loader 作用是把 CSS 注入到 DOM 上。

Options.injectType

Options.attributes

自定义被注入的标签上的属性，接受一个对象，默认 {}。

  1. module.exports = {
  2.     module: {
  3.         rule: [
  4.             {
  5.                 test: /\.css$/i,
  6.                 use: [
  7.                     {
  8.                         loader: "style-loader",
  9.                         options: {
  10.                             attributes: {
  11.                                 id: "customId"
  12.                             }
  13.                         }
  14.                     },
  15.                     {
  16.                         loader: "css-loader"
  17.                     }
  18.                 ]
  19.             }
  20.         ]
  21.     }
  22. }

生成的注入标签：

  1. <style id="customId"></style>

options.insert

标签注入的元素，默认 "head"，即会注入到 <head> 标签的末尾。

  1. module.exports = {
  2.     module: {
  3.         rules: [
  4.             {
  5.                 test: /\.css$/i,
  6.                 use: [
  7.                     {
  8.                         loader: "style-loader",
  9.                         options: {
  10.                             insert: "body"
  11.                         }
  12.                     },
  13.                     "css-loader"
  14.                 ]
  15.             }
  16.         ]
  17.     }
  18. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注