1.安装scss 样式支持依赖

yarn add -D sass

2.使用sass

        
        
测试使用sass




div {
    h1 {
        color: red;
    }
}

效果：

3.通过npm下载并复制清除样式代码，并在assets/css/reset.scss中粘贴

4.新建assets//css/index.scss全局样式文件，引入reset.scss文件，然后在main.服务器托管网ts中全局引入

// index.scss
// 引入清除默认样式文件
@import "./reset.scss"

清除默认样式成功：

5.配置全局样式变量，新建assets/css/global.scss文件，存储整个项目需要的样式变量服务器托管网

// 本文件配置的是sass全局变量，需要在vite.config.ts中引入,变量使用$开头
$base-color: #2803f7;

6.在vite.config.ts中配置全局样式变量

// 配置样式sass 全局变量
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/assets/css/global.scss";',
      },
    },
  },

7.使用全局样式变量

div {
    h1 {
        color: $base-color;
    }
}

全局样式变量使用成功：

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Python潮流周刊#10：Twitter 的强敌 Threads 是用 Python 开发的！

你好，我是猫哥。这里每周分享优质的 Python 及通用技术内容，大部分为英文，已在小标题注明。（标题取自其中一则分享，不代表全部内容都是该主题，特此声明。） 首发于我的博客：https://pythoncat.top/posts/2023-07-08-wee…