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);