引入外部scss文件方式(sass13.x)

通常项目里面都会抽离出公共的css以及相关变量，以提高代码质量。我们的项目是采用的vite+vue3+sass+ts+axios实现，在sass版本10.x时，引入公共的scss外部文件是通过在@import "./basic.scss"引入，但是在sass最新版本中的引入改为@use "@/assets/style/basic.scss" as *;

定义外部公共文件 basic scss 文件

• basic.scss

$navWidth: 200px;        //侧边导航的宽度
$themeColor: #0246be;    //项目的主题色

定义组件对应的 scss 文件

• header.scss

@use "@/assets/style/basic.scss" as *;
.header-component-box {
  height: 40px;
  background-color: $themeColor;
  .right {
    width: calc(100% - #{$navWidth});
  }
}