用于Semi Design的webpack插件,用于自定义主题,替换前缀等.
导言
该插件为半设计设计,支持webpack4和webpack5设计,提供两个主要能力:
- 自定义主题
- 替换 CSS 选择器的前缀
注:插件通过软件包路径检测出半相关依赖性. 它支持两者
@douyinfe/semi-ui和版本后缀软件包@douyinfe/semi-ui-19(亦为semi-icons) (中文(简体) ).
使用量
安装
安装 @douyinfe/semi-webpack-plugin 作为一种发展依赖:
npm install --save-dev @douyinfe/semi-webpack-plugin
# or
yarn add --dev @douyinfe/semi-webpack-plugin
自定义主题
Semi Design使用Scs变量来取出上千个 Design Tokens. 您可以通过此插件替换 Token 实现主题定制 . 更多信息
您可以通过三种方式自定义主题:
- 自定义主题的 npm 软件包
- 您工程中的本地 Scs 文件
- 将密钥值对参数传递到插件 优先从低到高.
通过 npm 软件包
要使用 npm 软件包, 您需要自定义主题通过 半设计系统.完成定制后,Semi DSM将为您生成 npm 软件包,然后您可以像这样使用.
// webpack.config.js
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
module.exports = {
// ...
plugins: [
new SemiPlugin({
theme: '@douyinfe/semi-theme-default'
})
]
// ...
};
通过本地 Scs 文件
您可以检查您在 半网点。 。 。 .
- step: 添加本地文件
// local.scss
$font-size-small: 16px;
- step2: 配置网络包
// webpack.config.js
const path = require('path');
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
module.exports = {
// ...
plugins: [
new SemiPlugin({
include: path.join(__dirname, 'local.scss')
})
]
};
通过参数
// webpack.config.js
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
module.exports = {
// ...
plugins: [
new SemiPlugin({
variables: {
"$font-size-small": '16px'
}
})
]
};
替换 CSS 选择器的前缀
Semi Design使用的 CSS 选择器默认前缀为半( 例如, ), .semi-button。 您可以通过此插件替换前缀 .
// webpack.config.js
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
module.exports = {
// ...
plugins: [
new SemiPlugin({
prefixCls: 'custom'
})
]
// ...
};
然后得到替换的 CSS 选择器(例如, .custom-button) (中文(简体) ).
阿庇语Name
新建 simiPlugin( 选项)
选项。前缀Cls
类型 : String
CSS选择器的前缀.
选项。 主题
类型 : String 或者说 Object
当类型是字符串时,它代表自定义主题npm的名称. 你用得着 半设计系统 改为自定义主题.
选项。主题。name
性能与类型相同 options.theme 是字符串.
选项。包含
类型 : String
本地 Scs 文件的绝对路径 .
选项。变量
类型 : Object
Scs 代号的密钥值对.
选项.omitCss
类型 : Boolean
在汇编阶段,是否排除 css 引用. 用于解决Next.js不支持在第三方代码中全面引入cs的问题. 看这个 讨论情况。 。 。 .
选项。webpack Context。 普通模块
类型 : webpack NormalModule
选项
类型 : String
取出cs的网包加载器的路径.
选项
类型 : Object
取出cs的网包加载器的选项.
选项
类型 : (loaderList:any[])=>any[]
您可以通过使用此选项覆盖加载器来自定义 Webpack 如何处理半相关样式 。 该函数将接收默认加载器列表( 包括选项. extractCss Options), 您应该返回新的加载器列表 。 最佳的做法只是将您的加载器添加到列表中,而不是删除或更改默认加载器,因为里面有一些核心逻辑.
在 Webpack@ 5 中, 需要通过 api 获取一些钩子 NormalModule.getCompilationHooks。但在某些情况下,网页包不会安装,例如Next.js。 因此,用户需要在"NormalModule"中作为参数通过.