Ankang_Blog

Appearance

记录我们vue3项目sass升级 ​

只针对我们项目中的告警，破坏性更新挺多的，当遇到问题后再查官网解决

升级原因 ​

sass官网的解释：https://sass-lang.com/documentation/breaking-changes/import/

Originally, Sass used @import rules to load other files with a single global namespace, with all built-in functions also available globally. We’re deprecating both Sass @import rules and global built-in functions now that the module system (@use and @forward rules) has been available for several years.

********

@import ​

@import causes numerous problems, requiring Sass members to be manually namespaced to avoid conflicts, slowing down compilation when the same file is imported more than once, and making it very difficult for both humans and tools to tell where a given variable, mixin, or function comes from.

built-in ​

Before the Sass module system was introduced, all Sass functions were globally available at all times. Many functions still have global aliases (these are listed in their documentation). The Sass team discourages their use and will eventually deprecate them, but for now they remain available for compatibility with older Sass versions and with LibSass (which doesn’t support the module system yet).

在引入 Sass 模块系统之前，所有 Sass 函数在任何时候都是全局可用的。 许多函数仍有全局别名（在其文档中列出）。 Sass 团队不鼓励使用这些别名，并将最终淘汰它们，但目前它们仍然可用，以便与旧版本的 Sass 和 LibSass 兼容（LibSass 尚不支持模块系统）。

Legacy JS API ​

Vite 6 uses the modern API by default. Previous versions of Vite still use the legacy API, however from Vite 5.4 you can switch it by setting api to "modern" or "modern-compiler". See Vite’s documentation for more details.

Vite 6 默认使用现代 API。 以前版本的 Vite 仍使用传统 API，但从 Vite 5.4 开始，您可以通过将 api 设置为 "modern "或 "modern-compiler "来切换。 更多详情，请参阅 Vite 文档。

https://vitejs.cn/vite5-cn/config/shared-options.html#css-preprocessoroptions

有示例

处理 ​

修改vite配置，支持现代API ​

javascript
// 官方示例  
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        math: 'parens-division',
      },
      styl: {
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
        },
      },
      scss: {
        api: 'modern-compiler', // 或 "modern"，"legacy"
        importers: [
          // ...
        ],
      },
    },
  },
})

将变量文件配置为全局 ​

在多个vue文件样式中都使用了变量，所以配置成全局

javascript
css: {
			preprocessorOptions: {
				scss: {
					additionalData: `@use "@/styles/variables.scss" as *;`,  // 在.vue文件中使用了scss  
					api: 'modern-compiler'
				}
			}
		},

优化@import ​

将@import 优化修改为 @use @forward

@use ​

javascript
// style1.scss 普通引用，使用文件名作为分组
@use "src/corners";
// 或者
// @use "src/corners" as corners;
.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

@use @forward 区别 ​

  1. 对于样式而言，两者并无区别
  2. 对于变量、函数、mixin而言，@use 只能引入后，在当前文件使用，有局部作用域；但是对于@forward而言，引入后自身不能使用，但是可以用来被使用
  3. 两者结合，则自身可以使用，也可以被外部引入使用

优化内置函数 ​

根据官方文档改造

javascript
@use 'sass:map';
// 使用  map-get ---> map.get
color: map.get($--colors, 'primary')

遇到的问题 ​

升级后，因为全局引入了变量.module.scss，我想在js文件中访问,在变量文件中:export暴露，在.vue文件中import引入，但是报错了，造成了循环引用 ​

解决：又新建了一个新的global.module.scss，用来中转

javascript
/* stylelint-disable */
// 因为已在全局引入，所以不需要在这里引入
:export {
    menuText: $menuText;
	menuActiveText: $menuActiveText;
	menuActive: $menuActive;
	subMenuActiveText: $subMenuActiveText;
	menuBg: $menuBg;
	menuHover: $menuHover;
	subMenuBg: $subMenuBg;
	subMenuHover: $subMenuHover;
	sideBarWidth: $sideBarWidth;
}

后续的思考 ​

我的scss变量想同时在另外的scss文件 & 脚本文件中使用，怎么做? ​

公用json法 ​

javascript
npm install sass-json-vars --save-dev
  1. 新建json文件管理变量

文件中转法 ​

本次用的这个，就是通过新建一个文件，将变量中转，提供给js使用

made with ❤️ by ankang