vue3 项目中使用 sass

1、安装依赖

请使用以下命令安装sass和sass-loader包：

pnpm install sass sass-loader --save-dev

2、使用 使用 lang="scss"

<style scoped lang="scss">
div{
  h1 {
    //样式代码
  }
}
</style>

3、添加全局样式

在src/styles目录下创建一个index.scss文件。

4、设置清除默认样式

项目中需要用到清除默认样式。

1、在src/styles目录下创建一个reset.scss文件。

2、进入npm官网，搜索reset.scss，拷贝对应的代码到src/styles/reset.scss文件中

3、index.scss引入reset.scss

// 引入清除默认样式
@import 'reset.scss' ;

5、sass 全局配置

1、在main.ts入口文件引入

//引入模板的全局的样式
import '@/styles/index.scss'

2、vite.config.ts文件配置

但是你会发现在src/styles/index.scss全局样式文件中没有办法使用$变量.因此需要给项目中引入全局变量

$.

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

//项目提供scss全局变量
//定义项目主题颜色

$color: red;

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

在export default defineConfig({
  // scss 全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
})

配置完毕scss提供这些全局变量可以在组件样式中使用了！！！

使用

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