| Scss 变量全局导入 & TypeScript 语法识别 | 您所在的位置：网站首页 › sass怎么读 › Scss 变量全局导入 & TypeScript 语法识别 |
Scss 变量全局导入 & TypeScript 语法识别
|
目录结构
|- src
| |- styles
| |- variables.scss
| |- export.module.scss
|- types
| |- scss-module.d.ts
| |- vite-env.d.ts
|- tsconfig.json
|- vite.config.ts
样式文件参考
variables.scss
scss 变量在此处书写，于 vite.config.ts 中进行全局自动引入 // 默认菜单主题风格 $base-sidebar-width: 200px; export.module.scssscss 变量的到处于此文件书写，直接在 variables.scss 书写会报 error // js/ts 与 scss 共享变量，在 scss 中通过 :export 进行导出，在 js/ts 中可通过 ESM 进行导入 :export { baseSidebarWidth: $base-sidebar-width; } 声明文件参考 scss-module.d.ts interface ScssModuleClasses { readonly baseSidebarWidth: string } vite-env.d.ts declare module '*.module.scss' { const classes: ScssModuleClasses export default classes } /// vite.config.ts export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";`, } } } }) tsconfig.json { // 定义希望被编译的文件所在的目录 ** 代表任意目录 * 代表任意文件 "include": ["types/*.d.ts"] } 测试src/App.vue import variables from '@/styles/export.module.scss'; console.log(variables.baseSidebarWidth) // 200px 声明成功示意图 |
【本文地址】
公司简介
联系我们