search

GitOfZGT / vite-plugin-theme-preprocessor

css theme preprocessor plugin for vite
MIT License
161 stars 15 forks source link

主题文件里面定义相同的变量会导致样式错误 #22

Closed Mohaiyo closed 2 years ago

Mohaiyo commented 2 years ago

主题文件定义相同变量导致样式错误

主题文件

theme-default.less

@import 'ant-design-vue/lib/style/themes/default.less';
@primary-color: #41b883;
@link-color: #485fc7;
@success-color: #06d6a0;
@warning-color: #faae42;

@error-color: #e62965;

theme-dark.less

@import 'ant-design-vue/lib/style/themes/dark.less';
@primary-color: #41b883;

上面两个主题文件定义了相同的primary-color变量@primary-color: #41b883; 会导致样式错误 image

重现步骤

修改预设主题demo可以复现

GitOfZGT commented 2 years ago

把 #41b883 加入 includeStyleWithColors ， 或者 移除 includeStyleWithColors 的 #ffffff ， 都是样式权重问题

 {
includeStyleWithColors: [
          {
            color: "#ffffff",
            // 排除掉样式属性，这里将非背景的白色提升权重
            excludeCssProps: ["background", "background-color"],
            // 此类颜色的是否跟随主题色梯度变化，默认false
            // inGradient: true,
          },
         {
           color:"#41b883"
         }
        ],
}

因为相同的变量值，是不会提取出来加入 scopeName的

Mohaiyo commented 2 years ago

好的 谢谢