sass安装全流程——解决vite报错：[sass] This file is already being loaded

背景：需要把项目中的less改为sass

第一步：安装sass需要的依赖

npm i sass postcss-scss -D

 第二步：在src/styles目录下创建全局样式文件

声明变量的文件variables.module.scss：

// 基础变量
$adminNamespace: v;
$elNamespace: el;

导出全局样式文件global.module.scss：

@import './variables.module.scss';

// 导出变量给 JS 使用
:export {
  namespace: $adminNamespace;
  elNamespace: $elNamespace;
}

第三步：在vite.config.js中写css配置引入全局变量，使变量可以直接在文件中使用

  css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/styles/variables.module.scss" as *;'
        }
      }
    },
  resolve: {
      extensions: ['.scss', '.css','...'],
  } 

第四步：使用

<style lang="scss">
$prefix-cls: '#{$adminNamespace}-app'
</style>

之所以会有already being loaded报错，是因为你可能这样写的全局变量文件，然后重复导入该文件，导致变量会被重复定义报错。改为以上的写法就好了。