vue3+ts+import导入scss报错

第1步，在 src目录下新建一个 typings.d.ts 文件

declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';

第2步，在更目录新建一个tsconfig.json文件，配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
  },
}

第3步，xxx.scss文件导出变量

$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;

// js/ts 与 scss 共享变量，在 scss 中通过 :export 进行导出，在 js/ts  中可通过 ESM 进行导入
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText; 
}

第4步，ts中直接导入使用

import xx from "../styles/xxx.scss";
console.log("sccs变量:",xx);