主题定制
Win-design提供了一套默认的主题，样式是使用SCSS编写的(开发者需提前配置sass开发环境)，开发者可以根据项目实际需要，修改主题变量来实现一定范围内的主题定制。
💅 主题变量
/* Font Size */
$--font-size-small: 13px !default;
$--font-size-base: 14px !default;
$--font-size-medium: 16px !default;
$--font-size-large: 18px !default;
/* Font Weight */
$--font-weight-primary: 500 !default;
/* Font Color */
$--color-text-primary: #000622 !default;
/* Themes Colors */
$--color-primary: #0F49ED !default;
$--color-primary: #40998A;
$--color-success: #5DB730 !default;
$--color-warning: #F3AF24 !default;
$--color-error: #F52C2C !default;
$--color-info: #999 !default;
$--color-background-light: #F3F5F9 !default;
$--color-background-base: #DFE7F5 !default;
🎉 定制主题
vue-cli 3.0(推荐)
Step 1： 新建主题变量文件 themes.scss
// themes.scss
$--color-primary: blue;
$--color-success: green;
...
Step 2：修改vue.config.js
通过注入全局scss变量的方式来覆盖组件库中对应的scss变量，从而完成主题色替换的需求。
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
// 根据自己样式文件的位置调整
data: `@import "@/themes.scss";`
}
}
}
}
Step 3：引用主题样式
// main.js 引入默认样式scss文件
import 'win-design/packages/themes/default.scss'
其他(非正式解决方案)
WARNING
使用vue-cli2.0构建的项目或非脚手架搭建的项目，对主题实现定制时，需要借助sass-loader的 data参数来为项目注入全局SCSS变量，覆盖win-design主题样式变量。
Step 1： 新建主题变量文件 themes.scss
// themes.scss
$--color-primary: blue;
$--color-success: green;
...
Step 2：修改loader相关配置
// vue-cli 2.0 build/utils.js
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
//你自己的scss全局文件的路径
resources: path.resolve(__dirname, '../src/themes.scss')
}
}
)
// 其他一般情况 webpack.base.conf.js
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
//你自己的scss全局文件的路径
resources: path.resolve(__dirname, '../src/themes.scss')
}
}
)
WARNING
在主题定制时使用按需引入需要修改@win-design/babel-plugin-import插件的配置。
// 以下为@win-design/babel-plugin-import默认配置
module.exports = {
...
plugins: [
["@win-design/babel-plugin-import", {
"libraryName": "win-design", // 组件库名称
"componentsPath": "packages/components", // 插件路径
"stylePath": "packages/themes", // 样式路径
"suffix": "scss" // 样式后缀
}]
]
}