# webstyles-template

> web样式模板

Latest version **1.0.0** (published 2021-11-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install webstyles-template
pnpm add webstyles-template
yarn add webstyles-template
bun add webstyles-template
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-11-24 |
| First published | 2021-11-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 2.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lbchh |
| Maintainers | lbchh |

## Links

- npm: https://www.npmjs.com/package/webstyles-template
- npm.io page: https://npm.io/package/webstyles-template

## Dependencies (6)

- [antd](https://npm.io/package/antd.md) 4.17.0
- [less](https://npm.io/package/less.md) 3.13.1
- [shelljs](https://npm.io/package/shelljs.md) ^0.8.4
- [webpack](https://npm.io/package/webpack.md) ^5.64.1
- [yargs-parser](https://npm.io/package/yargs-parser.md) ^21.0.0
- [less-plugin-clean-css](https://npm.io/package/less-plugin-clean-css.md) ^1.5.1

## Recent versions

- 1.0.0 (latest) — 2021-11-24

## README

### 配置主题
- 在themes目录下创建主题文件夹，如se；
- 添加index.less
  ```
  // 引入当前工程中antd.less文件
  @import '../../node_modules/antd/dist/antd.less';

  @primary-color: #3dcd58;
  @success-color: @primary-color;
  @warning-color: #fbb325;
  @error-color: #ff4d4d;
  @highlight-color: #ff4d4d;
  @border-radius-base: 2px;
  @link-color: #3dcd58;
  @info-color: #3dcd58;
  @border-color-base: #d9d9d9;
  @border-color-split: @border-color-base;
  //disabled
  @disabled-color: #d9d9d9;
  @disabled-bg: #f2f2f2;
  // menu
  @menu-dark-bg: @primary-color;
  //input
  @input-height-base: 36px;
  @input-height-lg: 50px;
  @input-height-sm: 28px;
  //text
  @heading-color: #333333;
  @text-color: #666666;
  @text-color-secondary: #999999;
  @disabled-color: #c0c0c0;
  //btn
  @btn-height-base: 36px;
  @btn-height-lg: 50px;
  @btn-height-sm: 28px;
  @btn-shadow: 0 0 0 rgba(255, 255, 255, 0);
  @btn-primary-shadow: 0 0 0 rgba(255, 255, 255, 0);
  @btn-text-shadow: 0 0 0 rgba(255, 255, 255, 255);
  //font-family
  @font-family: PingFang SC, Microsoft YaHei Light, Microsoft YaHei, arial, sans-serif;

  [class*='ant'] {
    box-sizing: border-box;
    & * {
      box-sizing: border-box;
    }
    a:active {
      color: #29a644;
    }
    a:hover {
      color: #64d975;
    }
    & .ant-calendar-input {
      height: 24px;
    }
  }
  .ant {
    &-drawer-title {
      font-weight: 600;
    }
  }
  //以上的less变量可以覆盖默认的antd样式，打包后将以css3变量的形式存在，全局生效
  :root {
    // 全局变量
    --main-color: @primary-color;
    --logo-border-color: rebeccapurple;

    --header-height: 68px;
    --content-padding: 20px;

    --base-line-height: 1.428571429;
    --transition-duration: 0.35s;
    --external-link: "external link";
  }

  ```
- 添加其他样式（如有需要）

### 主题构建命令
```
// 可根据参数构建任意版本的antd主题，构建完成后，将生成两个css文件
// --t theme name，默认 se
// --v antd版本, 默认 4.17.0

npm run build --t=se --v=4.13.0
```
主题文件生后的路径为 ./themes/[-t]/[-t]@[-v].css 和 ./themes/[-t]/[-t]@[-v]-min.css

---
_Source: https://npm.io/package/webstyles-template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._