@zougt/theme-css-extract-webpack-plugin NPM

@zougt/theme-css-extract-webpack-plugin

这个 webpack 插件与@zougt/some-loader-utils结合轻松实现在线动态主题，使用文档直接查看@zougt/some-loader-utils

Options

Name	Type	Default	Description
`multipleScopeVars`	`{Object[]}`	`[]`	与@zougt/less-loader和@zougt/sass-loader的`multipleScopeVars`对应即可
`extract`	`{Boolean}`	`true`	是否提取
`outputDir`	`{String}`	`/`	提取的 css 文件存放目录
`removeCssScopeName`	`{Boolean}`	`false`	是否将提取的 css 文件内移除对应的权重类名
`customThemeCssFileName`	`{Function}`	`null`	自定义 css 文件名的函数
`defaultScopeName`	`{String}`	multipleScopeVars0.scopeName	默认使用主题名称
`themeLinkTagId`	`{String}`	`theme-link-tag`	在 html 中使用主题 css 文件的 link 标签的 id
`themeLinkTagAppend`	`{Boolean}`	`false`	是否在其他 css 之后插入主题 css 文件的 link 标签
`customLinkHref`	`{Function}`	`null`	预设主题模式，抽取 css 后，自定义默认添加到 html 的 link 的 href

`multipleScopeVars`

Type: Object[]
Default: []

与@zougt/less-loader和@zougt/sass-loader的multipleScopeVars对应

`multipleScopeVars[].scopeName`

Type: String

`extract`

Type: Boolean
Default: true

是否提取，提取主题 css 文件的操作只在 webpackConfig.mode:"production"才生效，但@zougt/theme-css-extract-webpack-plugin另外一个功能是defaultScopeName与html-webpack-plugin结合在 html 文件的 html 标签添加默认的 className，在开发模式需要

通常这样使用:

new ThemeCssExtractWebpackPlugin({
  multipleScopeVars,
  extract: process.env.NODE_ENV === 'production',
});

`outputDir`

Type: String
Default: /

提取的 css 文件存放目录

`removeCssScopeName`

Type: Boolean
Default: false

是否将提取的 css 文件内移除对应的权重类名

多主题编译示例中移除之后的 css 内容：

theme-default.css

.un-btn {
  background-color: #0081ff;
}

theme-mauve.css

.un-btn {
  background-color: #9c26b0;
}

`customThemeCssFileName`

Type: Function
Default: null

自定义 css 文件名的函数

new ThemeCssExtractWebpackPlugin({
  multipleScopeVars,
  extract: process.env.NODE_ENV === 'production',
  customThemeCssFileName: (scopeName) => {
    return `${scopeName}-antd`;
  },
});

提取的 css 文件名：

├── /dist/
│ ├── theme-default-antd.css
│ └── theme-mauve-antd.css

`defaultScopeName`

Type: String
Default: ""

defaultScopeName为空时会默认取自multipleScopeVars[0].scopeName

默认使用主题的 scopeName，使用了html-webpack-plugin的钩子在 html 文件的 html 标签添加默认的 className（当removeCssScopeName为 false 有效），并且当extract为 true 和存在themeLinkTagId时，会在 html 中插入使用默认主题 css 文件的 link 标签

<!DOCTYPE html>
<html class="theme-default">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/theme-default.css" rel="stylesheet" id="theme-link-tag" />
    <link href="/static/css/style.8445032bddc5.css" rel="stylesheet" />
  </head>
  <body></body>
</html>