vite 问题

类型“ImportMeta”上不存在属性“env”

解决： 在tsconfig.json文件的"compilerOptions"里添加

"types": ["vite,client" ]

无法识别 *. vue 文件

src下配置 env.d.ts

/// <reference types="vite/client" />
interface ImportMetaEnv {
    readonly VITE_BASE_URL: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

declare module '*.vue' {
    import { DefineComponent } from 'vue';
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

tsconfig.ts

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ],
  "compilerOptions": {
    "types": ["vite/client", "./env"]
  }
}

---

使用 Sass

基础教学

@use 'sass:meta';
$bgcolor: red !default;

@mixin ChangeColor ($color, $textcolor, $fontsize) {
  background-color: $color;
  color: $textcolor;
  font-size: $fontsize;
}

/* 使用变量 */
#app body {
  background-color: $bgcolor;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 1rem;

  @include ChangeColor(red, green, 18px);
}


// if-else 语句
@mixin font-fl($font) {
  &:after {
    @if (meta.type-of($font)=='string') {
      content: 'My Font is #{$font}';
    }

    @else {
      content: 'Sorry, the argument #{$font} is not a string #{meta.type-of($font)}';
    }
  }
}

h2 {
  @include font-fl(sans-serif);
}


// & 父级定位
.button {
  body.page-about & {
    color: #000;
  }
}

// 引入其他 scss
#main {
  // @import "./partials/reset";
  display: flex;
}

// 多级混合
@mixin responsive($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// 多级包含
@mixin compound {
  @include hight-background;
  @include hight-text;
}

@mixin hight-text() {
  font-size: 24px;
  color: red;
  text-align: center;
}

@mixin hight-background() {
  background-color: yellow;
}