Vue3中集成sass（sass的使用 ）_vue3 安装sass

一、安装sass

npm i sass 
1

二、创建src/styles/index.scss

内容如下：

// 引入清楚全局默认样式
@import 'reset.scss'
1
2

reset.scss的内容

npm上搜索reset.scss
1

三、入口文件引入src/styles/index.scss

import '@/styles/index.scss'
1

重置样式生效，但是无法给项目引入全局变量$

四、在style/variable.scss创建一个variable.scss文件

// 给项目提供的scss全局变量
$mycolor:red;
1
2

五、在vite.config.ts文件配置如下:

export default defineConfig({
  plugins: [
    vue(),
  // scss全局变量的一个配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13

六、可以使用了