vue3项目，vite+vue3+ts+pinia(6)-css样式

有sass,less,stylus这三种样式预处理器

1. 不同的安装:

// 安装 sass 推荐使用这种
npm install -D sass
// 安装 less
npm install -D less
// 安装 stylus
npm install -D stylus

2. 终端: npm install -D sass
3. src 文件下 新建styles,新建五个文件
   

// 在common.scss 文件中, 全局公共样式
body{
  background-color: red;
}

// variables.scss 全局css变量
$color-green: green;

// index.scss 中,样式统一导出
@import "./common.scss";
@import "./mixin.scss";
@import "./transition.scss";
@import "./variables.scss";

4. src => main.ts 样式中

// 加载全局样式
import './styles/index.scss'

5. src => views => home => indexName.vue

<template> 
	<div>
    	<h1>首页</h1>
 	</div>
</template>

<style lang="scss" scoped>
@import "../../styles/variables.scss";
h1 {
  color: $color-green;
}
</style>

6. 终端: npm run dev, 结果和预期一样
7. 不过有一点,比较麻烦, 用sass变量,需要引用,在官网看到有配置(https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions)
   
   在自己的项目中: vite.config.ts 文件中

// 与plugins 同级, 加上代码

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }

同时也要修改, src => views =>home => indexName.vue

<template> 
	<div>
    	<h1>首页</h1>
 	</div>
</template>

<style lang="scss" scoped>
h1 {
  color: $color-green;
}
</style>

8. 终端: npm run dev , 结果一样