@zougt/theme-css-extract-webpack-plugin
v1.4.0
Published
extracts theme CSS into separate files
Downloads
28
Readme
@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} | multipleScopeVars[0].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.cssdefaultScopeName
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>themeLinkTagId
Type: String
Default: theme-link-tag
在 html 中使用主题 css 文件的 link 标签的 id
当themeLinkTagId为 false 时即不会生成对应的 link 标签
themeLinkTagAppend
Type: Boolean
Default: false
是否在其他 css 之后插入主题 css 文件的 link 标签