vite scss相关

vite i sass

Scss 与 Sass异同

vite 项目安装 sass npm i sass -D

然后在项目中添加如下即可<style scope lang="scss"></style>

项目主题切换

利用sass的混入特性，实现切换主题的效果

创建 themes.scss文件，然后定义颜色字段，参考量 elementui 的命名方式。

:root {
  /* 边框颜色 */
  --border-color-base: #409EFF 

  /* 提示框 */
  --color-success: #67C23A 
  --color-warning: #E6A23C
  --color-danger: #F56C6C
  --color-info: #909399

  /* 文字颜色 */
  --color-text-primary: #303133
  --color-text-regular: #606266
  --color-text-secondary: #909399
  --color-text-placeholder: #C0C4CC

  /* # 多级标题颜色 */
  --border-color-base: #DCDFE6
  --border-color-light: #E4E7ED
  --border-color-lighter: #EBEEF5
  --border-color-extra-light: #F2F6FC

  /* 基本颜色 */
  --color-white: #000000
  --color-black: #FFFFFF
  --background-color-base: Transparent
}

如何使用呢？ color: var(--logo-color);