项目中 scss 的升级遇到的问题

缘起

最近项目中scss 版本升级到 1.83.0，之前引入scss文件的语句： import config.var.scss 爆出很多 warning。

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

搜索查看后，意思是 scss 1.8.0后将不再支持 @import， 需要使用 @use.

为了修复不好看的 warning （可能是以后的Eror），经过一系列的搜索、配置、调试，中途遇到了很多问题，好在最终也都 fixed!!!

环境

问题重现和修复的demo环境如下：

{
  "name": "test-scss-import",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "sass": "^1.83.0",
    "vite": "^6.0.3"
  }
}

环境中使用的目录说明：

- router
    index.js # 配置路由，方便切换页面，查看效果
styles
    global.scss # 测试在main.js 中全局出引入scss 变量文件
    index.modules.scss # 测试js中使用 scss 变量
    scoped.scss # 测试在单文件 引入使用 scss 变量文件
    style.scss # 常规css， 可以忽略
- views
    AboutView.vue # 测试 js 使用 scss变量
    HomeView.vue # 测试全局 scss 变量
    MessageView.vue # 测试 style 引入 scss 变量
    

问题1： @use 替换 @import

重现

# MessageView.vue
<template>
    <div>
        <p>this is message page.</p>
        <p class="msg"> this is message page.</p>
    </div>
</template>

<script setup>
</script>
<style lang="scss" scoped>
@import '@/styles/scoped.scss';

.msg {
    font-size: $large-text;
}
</style>

样式生效，但是命令行有警告：

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

修复

<style lang="scss" scoped>
// @use '@/styles/scoped.scss'; // 直接使用use替换import，报错：Undefined variable.
@use '@/styles/scoped.scss' as * ; // 正确用法


.msg {
    font-size: $large-text;
}
</style>

重点： 最后的 as * 一定要加

问题2： 引入全局scss变量文件

这部分的问题其实和问题已类似。都是需要使用 @use 替换 @import

对于全局引入scss变量， 原本的内容如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/global.scss";'
      }
    }
  },
  resolve: {
    alias: {
      '@': '/src/'
    }
  }
})

由于 上面修复了 单文件中的 引入问题，现在出现一个新的问题：

[sass] @use rules must be written before any other rules.      
    ╷
  2 │ @use '@/styles/scoped.scss' as * ;
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

报错的位置，正是问题一中修复的部分。

仿照问题一中的做法，对此进行修复：

css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/global.scss" as *;'
      }
    }
  },

样式生效，修复完成。

问题3： 在js中使用scss变量

按照常规思想进行引入:

<template>
  <div>
    <p :style="{ color: scssVar.secondaryColor }">this is about page. </p>
  </div>
</template>

<script setup>
import scssVar from '@/styles/index.scss';
console.log('scssVar:', scssVar);
console.log('scssVar:', scssVar.secondaryColor);
</script>

结果 控制台报错:

含义大概是说index.scss 文件中没有 默认导出任何东西.

$primaryColor: #42b883;
$secondaryColor: red;


:export {
    primaryColor: $primaryColor;
    secondaryColor: $secondaryColor;
}

修复

index.scss 内容不变, 修改文件名为 index.module.scss, 中间的 module 是重点,一定要添加.

import scssVar from '@/styles/index.module.scss';

可以看到之前的console:

此时可以正常在template中使用变量:

    <p :style="{ color: scssVar.secondaryColor }">this is about page. </p>

至此项目中,需要修复的部分已完成.

终章: 我还有疑问~

1. @use "@/style/xxx.scss" as * 中的 as * 含义是什么?加不加的区别有点哪里?
2. @use rules must be written before any other rules. @use 的规则在最其他规则前面的文档说明和意义又是什么?
3. :export 的文档我一直没有找到.
4. 样式文件名中添加 module,我了解到是 css module的概念, 但是在此时 :export和module的搭配又起到了什么样的效果?

求助

我感觉我上面的几个问题,都应该是在文档中可以查询到的,可是目前我暂时没有找到在哪个文档中有说明(TnT). 希望看到笔记的同学们,又了解到相关文档出处的,可以发我看看,感谢🙏