feat: update sass version #2974
Conversation
Walkthrough本次提交主要对项目配置和样式文件进行了调整。package.json 中新增了中文描述，更新了 lint-staged 配置和开发脚本，并移除了 sass 分辨率的版本锁定；多个 SCSS 文件统一将旧的 @import 替换为更现代的 @use 语法，引入并更新了变量与 mixin 的导入方式，同时对部分组件的布局和颜色变量进行了微调；vite 配置文件中的 SCSS 预处理选项也同步作出了相应更新。 Changes
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/card/card.scss (1)
1-3: 建议统一 SCSS 导入语法虽然已经正确更新了 text-ellipsis 的导入语法，但建议也将其他的
@import语句更新为@use，以保持一致性。-@import '../price/price.scss'; -@import '../tag/tag.scss'; +@use '../price/price.scss' as *; +@use '../tag/tag.scss' as *; @use '../../styles/mixins/text-ellipsis.scss' as *;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
package.json(3 hunks)src/packages/calendar/calendar.scss(1 hunks)src/packages/card/card.scss(1 hunks)src/packages/dialog/dialog.scss(1 hunks)src/packages/menu/menu.scss(1 hunks)src/packages/sidebar/sidebar.scss(0 hunks)src/packages/tabs/tabs.scss(0 hunks)src/packages/uploader/uploader.scss(1 hunks)src/sites/assets/styles/highlight.scss(1 hunks)src/sites/assets/styles/md-style.scss(2 hunks)src/sites/assets/styles/variables.scss(2 hunks)src/sites/doc/App.scss(1 hunks)src/sites/doc/components/header/header.scss(7 hunks)src/sites/doc/components/nav/nav.scss(5 hunks)src/sites/doc/main.tsx(1 hunks)src/sites/mobile/App.scss(1 hunks)src/sites/theme/components/header/header.scss(7 hunks)src/sites/theme/components/nav/nav.scss(4 hunks)src/sites/theme/mainTheme.tsx(1 hunks)src/styles/mixins/index.scss(0 hunks)vite.config.ts(2 hunks)
💤 Files with no reviewable changes (3)
- src/packages/sidebar/sidebar.scss
- src/styles/mixins/index.scss
- src/packages/tabs/tabs.scss
✅ Files skipped from review due to trivial changes (2)
- src/sites/theme/mainTheme.tsx
- src/sites/doc/main.tsx
🔇 Additional comments (79)
vite.config.ts (2)
11-11: 更新为现代 SCSS 语法使用
@use替代@import是正确的做法，这符合 Sass 的最新最佳实践。
96-96: 验证是否需要 silenceDeprecations 配置注释掉 silenceDeprecations 配置是合理的，这样可以在构建过程中及时发现废弃警告。但建议验证是否会影响构建输出。
src/packages/menu/menu.scss (1)
1-1: 正确使用 SCSS 模块系统使用
@use导入 text-ellipsis mixin 是正确的做法，这提高了样式的模块化程度。src/sites/assets/styles/highlight.scss (1)
1-2: 添加变量依赖正确引入了 variables.scss，这有助于保持样式的一致性和可维护性。
src/sites/doc/App.scss (1)
1-2: 模块化 SCSS 导入
使用 @use 替换原有的 @import 语法，引入变量文件能够有效避免全局命名空间污染，并增强样式代码的模块化和可维护性。src/sites/doc/components/nav/nav.scss (8)
1-2: 模块化导入更新
采用 @use 并指定命名空间 variables 来引入变量文件，有助于统一管理全局样式变量，避免重复定义冲突。
5-10: 使用变量替换硬编码
在导航容器中，通过 variables.$doc-header-height 和 variables.$white 分别设置顶部间距和背景颜色，这使得样式配置更灵活且易于维护。
29-32: 悬停效果颜色调整
在 .introduce 列表项的悬停状态中，将文字颜色设置为 variables.$doc-default-color，确保交互状态下的视觉反馈与整体主题一致。
35-42: 导航项默认文字颜色
通过使用 variables.$doc-default-nav-color 为列表项设置默认的文字颜色，有助于保持导航区域颜色风格的统一。
65-69: 链接悬停状态调整
在导航内的 > ul li &:hover a 样式中，改用 variables.$doc-default-color 作为悬停颜色，此改动能提升整体交互体验的一致性。
74-77: 活动状态样式统一
设置 a 标签在 .router-link-active 和 .active 状态下的颜色为 variables.$doc-default-color，并添加 !important 以确保优先级，该修改有助于在激活状态时保持视觉风格。
79-82: 链接默认状态颜色更新
将链接的 :link 和 :visited 状态颜色统一修改为 variables.$color-title，从而使得整体页面色调更为一致。
85-88: 悬停及访问状态细化
在 a 标签的 &:hover 及嵌套的 &:visited 状态中，均采用 variables.$doc-default-color 作为颜色设置，确保用户在不同交互状态下获得统一的视觉反馈。src/sites/theme/components/nav/nav.scss (8)
1-2: 模块化导入更新
通过 @use 引入 '../../../assets/styles/variables.scss' 并使用命名空间 variables，确保样式变量的统一管理，同时避免全局变量冲突。
5-10: 统一的样式变量应用
利用 variables.$doc-header-height 和 variables.$white 分别设置导航最外层容器的顶部位置和背景色，增强了组件样式的一致性与可配置性。
29-32: 悬停状态统一优化
在导航菜单中，将 li 悬停时的文字颜色修改为 variables.$doc-default-color，有助于为用户提供一致清晰的交互反馈。
35-42: 导航项默认文字颜色优化
设置导航 li 元素的默认文字颜色为 variables.$doc-default-nav-color，可确保导航区域内各项颜色与整体主题保持一致。
65-69: 链接悬停状态样式调整
通过修改 > ul li &:hover a 的颜色为 variables.$doc-default-color，加固了页面内链接交互时的样式一致性。
74-77: 活动链接状态色强化
为链接在激活状态（.router-link-active、.active）下采用 variables.$doc-default-color !important，使得激活状态更加醒目且与主题风格协调。
77-80: 链接默认与访问状态颜色更新
调整 &:link 与 &:visited 状态下链接的颜色为 variables.$color-title，这一改动有助于整体风格的统一。
82-89: 悬停及访问状态颜色细化
在 a 标签的 &:hover 及其嵌套的 &:visited 块中，将颜色设置为 variables.$doc-default-color，确保不同状态下的颜色一致，优化视觉体验。src/sites/mobile/App.scss (1)
1-2: 更新 SCSS 模块导入语法
将原先的 @import '../../styles/jd-font.scss'; 替换为现代的 @use 语法，这不仅符合最新的 SCSS 模块化要求，也有助于避免潜在的全局命名空间污染。建议确认 jd-font 文件中是否需要额外使用命名空间访问。src/sites/assets/styles/variables.scss (2)
11-14: 新增颜色变量
新增 $color-title、$white 和 $black，并使用 !default 修饰符，确保变量可被后续覆盖。这为项目提供了更灵活的颜色调控手段，同时也便于在其他样式中引用。
81-87: 更新文档及导航颜色配置
将 $doc-default-header-color 设置为 $white，同时更新 $doc-default-nav-bg 为 $white 和 $doc-default-nav-color 为 $color-title，这些修改能够确保文档和导航区域内的颜色风格与项目主题保持一致。src/packages/dialog/dialog.scss (1)
3-3: 更新 Mixins 引用
使用 @use 替换原有的 @import 语法来引入 text-ellipsis mixin，这种方式更符合 Sass 模块化的最佳实践，有助于局部作用域管理。请确保其它使用该 mixin 的地方均已同步更新。src/sites/assets/styles/md-style.scss (3)
1-2: 使用 @use 引入 Sass 模块
在文件顶部添加了对内置模块（sass:color）和本地变量文件（./variables.scss）的引用，此举提高了代码的模块化和可维护性。建议关注可能的命名冲突问题。
25-25: 更新悬停状态颜色处理
将悬停状态下的颜色调整从 mix 函数改为 color.adjust，语法更直观，便于后续颜色调整和维护。请确认新方法生成的颜色与设计预期一致。
29-29: 更新激活状态颜色处理
对激活状态的颜色调整同样使用 color.adjust 替换了 mix 函数，建议检查调整后颜色的视觉效果是否满足需求。src/packages/calendar/calendar.scss (1)
7-8: 更新日历组件布局
在 .nut-calendar 组件中新增了 flex-direction: column 与 flex: 1 属性，确保组件内的子元素能以垂直方向排列并充分利用可用空间。建议在多种屏幕尺寸下测试布局效果，防止意外样式问题。src/packages/uploader/uploader.scss (1)
2-2: 更新 Mixin 引用方式
将原本的 @import 改为 @use 语法来引入 '../../styles/mixins/text-ellipsis.scss'，这符合现代 Sass 的模块化趋势，有助于避免全局污染。请检查其它依赖该 mixin 的文件是否也一并升级。package.json (3)
4-4: 新增/更新描述字段
在 package.json 中新增了中文描述字段，这将有助于国内用户更好地理解组件库的用途和特点。
47-50: 更新 lint-staged 配置
新增的 lint-staged 配置确保了 SCSS、Markdown、TS/TSX 以及 JS 文件可以自动进行格式化和代码修复，这对于维持代码一致性和质量非常有益。
59-60: 调整开发脚本
将 "dev:rtl" 和 "dev:jrkf" 脚本修改为使用 "npm run dev" 的调用方式，从而统一命令风格。建议在不同平台及环境下验证这些命令的执行情况。src/sites/doc/components/header/header.scss (23)
1-1: 引入变量文件的改进
此处使用了 SCSS 的 @use 语法引入变量文件，并指定别名“variables”，有助于统一管理全局样式变量。
13-14: 使用变量统一定义高度
通过使用 variables.$doc-header-height 设定 .doc-header 的 height 与 line-height，可确保文档头部高度的一致性，同时便于后续维护。
129-129: 统一下拉控件标题颜色
此处将 .header-select-hd 的文字颜色由原来的硬编码值更新为 variables.$theme-red-word，建议确认导入的变量定义正确且符合设计要求。
160-161: 红色主题-背景与文字颜色更新
在 .doc-header-red 区域，通过使用 variables.$theme-red-header-bg 和 variables.$theme-red-word 替换了原有的硬编码，提升了代码的可维护性与主题一致性。
169-169: 红色主题-logo边框颜色调整
这里将 logo-border 的背景颜色更改为 variables.$theme-red-border，有助于整个红色主题风格的统一。
175-179: 红色主题-搜索输入框样式更新
更新了 .search-input 内的文字颜色以及其 ::-webkit-input-placeholder 的颜色，分别引用了 variables.$theme-red-word 和 variables.$theme-red-input，保证用户界面的一致性。
184-187: 红色主题-导航项颜色统一
此处将 .nav-item 的文字颜色统一更新为 variables.$theme-red-word，以确保导航栏在普通状态下的风格一致。
189-195: 红色主题-激活状态颜色调整
在 .nav-item.active 状态中，文字颜色及其子元素（例如链接）的颜色已更新为 variables.$theme-red-actice，建议核对该变量值是否满足设计要求。
218-223: 红色主题下拉选择控件标题更新
通过 variables.$theme-red-word 为标题文字着色，并使用 variables.$theme-white-select-border、variables.$theme-white-select-word 设置下拉框边框和内部文字颜色，从而实现风格统一。
225-229: 红色主题下拉选项激活状态样式
更改了 &-item 中的 border-color 与 background-color，分别使用 variables.$theme-red-select-border 与 variables.$theme-red-select-bg；同时在悬停状态下，颜色设为 variables.$theme-red，整体风格更为协调。
234-236: 白色主题背景及文字颜色更新
在 .doc-header-white 中，通过使用 variables.$white、variables.$theme-white-word 与 variables.$theme-white-box-border 替换了原有的硬编码样式，便于统一调整主题。
244-244: 白色主题-logo边框颜色统一
把 .logo-border 的背景颜色设置为 variables.$theme-white-border，确保 logo 部分与白色主题整体风格协调一致。
250-254: 白色主题-搜索输入框样式更新
更新了 .search-input 中的文字色以及 ::-webkit-input-placeholder 的颜色，分别采用 variables.$theme-white-word 与 variables.$theme-white-input，进一步提高了样式的统一性。
259-262: 白色主题-导航项样式统一
此处将导航项及其子链接的颜色均更新为 variables.$theme-white-word，确保整体界面色调的一致。
264-270: 白色主题-激活导航项颜色调整
在 .nav-item.active 状态中使用 variables.$theme-white-actice 来设置文字颜色，保证用户交互时的视觉反馈符合预期。
293-298: 白色主题下拉选择控件样式更新
对 .header-select 内部控件的标题颜色及边框重新定义为 variables.$theme-white-select-word 与 variables.$theme-white-select-border，并调整下拉项的文字颜色，统一了组件样式。
309-311: 黑色主题背景及文字颜色调整
在 .doc-header-black 部分，通过使用 variables.$black、variables.$theme-black-word 与 variables.$theme-black-box-border，确保黑色主题的视觉效果与其他主题风格一致。
319-319: 黑色主题-logo边框颜色更新
将黑色主题下 logo-border 的背景颜色更改为 variables.$theme-black-border，保证整个黑色主题的设计风格统一。
325-329: 黑色主题-搜索输入框样式更新
更新了 .search-input 的文字颜色及 ::-webkit-input-placeholder 的颜色，分别采用 variables.$theme-black-word 与 variables.$theme-black-input，确保在黑色主题下的输入框显示效果正常。
334-337: 黑色主题-导航项颜色统一
此处将导航项的文字颜色设置为 variables.$theme-black-word，以保持黑色主题下导航栏的风格一致。
339-345: 黑色主题-激活导航项样式调整
在 .nav-item.active 状态中通过 variables.$theme-black-actice 指定激活时的文字颜色，同时更新了内部链接的颜色，建议检查设计稿确保数值准确。
368-374: 黑色主题下拉选择控件样式更新
更新了 .header-select-hd 的文字颜色、背景色及边框，分别采用 variables.$theme-black-select-word、variables.$theme-black-select-bg、variables.$theme-black-select-border，使组件风格与黑色主题保持一致。
376-380: 黑色主题下拉选项悬停状态调整
在下拉列表的项上，hover 状态时背景色与边框色调整为 variables.$theme-black-select-hover，确保鼠标交互时的视觉反馈符合整体设计。src/sites/theme/components/header/header.scss (23)
1-1: 引入全局变量文件
同样采用 @use 语法引入 '../../../assets/styles/variables.scss' 文件并设置别名“variables”，保证整个项目样式统一管理。
14-15: 文档头部高度统一设置
在 .doc-header 内部，通过 variables.$doc-header-height 设置高度与行高，提升样式的模块化管理。
131-131: 下拉选择控件标题颜色更新
将 .header-select-hd 的文字颜色更新为 variables.$theme-red-word，确保红色主题中标题色与全局设定保持一致。
163-164: 红色主题背景与文字颜色调整
在 .doc-header-red 部分，背景图片和文字颜色分别使用了 variables.$theme-red-header-bg 与 variables.$theme-red-word，以实现风格统一。
172-172: 红色主题-logo边框颜色更新
更新了 .logo-border 的背景颜色为 variables.$theme-red-border，保证 logo 部件与红色主题的整体视觉效果一致。
178-182: 红色主题-搜索输入框样式更新
通过使用 variables.$theme-red-word 和 variables.$theme-red-input 分别设置搜索输入框的文字及占位符颜色，增强了整体界面风格的连贯性。
187-190: 红色主题-导航项颜色统一
此处调整了 .nav-item 中的文字颜色和链接颜色为 variables.$theme-red-word，确保所有导航项风格一致。
192-198: 红色主题-激活导航状态更新
在激活状态下，将 .nav-item.active 的文字颜色更新为 variables.$theme-red-actice，并同步更新了其子元素链接颜色，符合设计反馈要求。
224-226: 红色主题下拉控件标题边框调整
更新 .header-select-hd 的边框样式为 1px solid variables.$theme-white-select-border，并确保文字颜色为 variables.$theme-red-word，样式更为统一。
228-235: 红色主题下拉项样式更新
在 .header-select-item 部分，设置 border-color 为 variables.$theme-red-select-border 和 background-color 为 variables.$theme-red-select-bg，同时鼠标悬停时文字颜色改为 variables.$theme-red，确保组件在交互中的一致性。
241-243: 白色主题背景及文字更新
在 .doc-header-white 模块中，通过使用 variables.$white、variables.$theme-white-word 与 variables.$theme-white-box-border 来统一背景、边框和文字颜色，提高主题维护性。
251-252: 白色主题-logo边框颜色更新
将 .logo-border 的背景颜色更新为 variables.$theme-white-border，以实现与白色主题整体风格的统一。
257-261: 白色主题-搜索输入框样式更新
更新了 .search-input 的文字颜色以及 ::-webkit-input-placeholder 的显示颜色，分别采用了 variables.$theme-white-word 与 variables.$theme-white-input，确保风格连贯。
266-269: 白色主题-导航项颜色统一
此处将导航项及其子链接的文字颜色统一设为 variables.$theme-white-word，保证整体白色主题的显示效果。
271-277: 白色主题-激活状态样式调整
在导航项激活状态下，文字颜色更新为 variables.$theme-white-actice，对应激活反馈的设计要求，请确认变量值是否正确。
303-305: 白色主题下拉控件边框与文字颜色更新
对 .header-select-hd 中的颜色和边框进行调整，使用 variables.$theme-white-select-word 和 variables.$theme-white-select-border，以统一白色主题风格。
320-322: 黑色主题背景及文字颜色调整
在 .doc-header-black 部分，通过使用 variables.$black、variables.$theme-black-word 与 variables.$theme-black-box-border 统一背景及文字颜色，确保黑色主题效果符合预期。
330-330: 黑色主题-logo边框颜色更新
将 .logo-border 中的背景颜色更新为 variables.$theme-black-border，从而确保 logo 部分与黑色主题整体视觉一致。
336-340: 黑色主题-搜索输入框颜色更新
更新 .search-input 的文字颜色及 placeholder 样式，分别使用 variables.$theme-black-word 和 variables.$theme-black-input，保证阅读体验与主题风格统一。
345-348: 黑色主题-导航项颜色统一
此处将导航项及其子链接颜色设置为 variables.$theme-black-word，保证界面整体风格一致。
350-356: 黑色主题-激活导航项样式更新
在 .nav-item.active 状态下，文字颜色更新为 variables.$theme-black-actice，同时调整子链接颜色，确保激活状态的反馈符合设计要求。
382-385: 黑色主题下拉控件样式更新
更新了 .header-select-hd 的文字和背景颜色，以及边框样式，分别使用了 variables.$theme-black-select-word、variables.$theme-black-select-bg 与 variables.$theme-black-select-border，保持整体一致性。
387-394: 黑色主题下拉选项悬停状态更新
在下拉菜单项中，hover 状态下背景颜色和边框颜色改为 variables.$theme-black-select-hover，确保交互反馈清晰。
github-actions
bot
added
the
action:review
🤔 这个变动的性质是？
sass 升级，解除 deprecation。
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
• 样式改进
- 日历组件调整为垂直布局并优化自适应展示，提升视觉整洁度。
- 卡片、对话框、菜单、侧边栏、选项卡及上传等组件的样式进行了统一升级，呈现更现代的视觉风格。
- 文档页面（包括标题、导航及主题部分）的配色和排版经过优化，改善了阅读体验。