Vue3+Vite中使用SCSS

一、安装SCSS

在创建好Vue项目后，在项目路径中打开命令行输入以下命令：

npm i sass sass-loader --save-dev

二、使用SCSS

安装完成后便可以在项目中使用SCSS，需要在style标签中设置lang属性为scss如：

<style scoped lang="scss">
  @use '../../assets/style/index.scss' as base; // 引入单独的scss文件
  .login-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    font-size:base.$fontSize;
    color:$c121;
    @include button-style; //使用的是全局的scss
  }
</style>

三、配置SCSS全局共享变量

1.配置全局 scss中我们可以自定义变量，一些变量往往是全局共享的，为了方便我们可以在vite.config.js中defineConfig里面添加配置如下：

(需要自己新建一个存放共享的变量的文件如：variables.scss)

   css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 variables.scss 这样就可以在全局中使用 variables.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@use "@/assets/style/variables.scss" as *;'
      }
    }
  }

完整代码(vite.config.ts配置)：

// https://vite.dev/config/
export default defineConfig(({command,mode}:ConfigEnv) :UserConfig =>{
    return {
        plugins: createVitePlugins(env,isBuild), // 配置插件,
        base: './', // 设置打包路径
        resolve: {
            alias: {
                '@': path.resolve(__dirname,'./src'),// 设置 `@` 指向 `src` 目录
                "@assets":path.resolve(__dirname,"./src/assets"),
                "@components":path.resolve(__dirname,"./src/components"),
            },

        //安装对应的scss npm i sass sass-loader -D
        // @import 已经被弃用 改用 @use
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/style/variables.scss" as *;',
                }
            }
        },
}
})

variables.scss文件：

$c100: #fff;
$c101: #000;
$c121: #212121;

 @mixin button-style {
    border: none;
    padding: 10px 20px;
  }

@mixin colorBtn($color) {
    background: $color;
    &:hover {
      color: $color;
  
      &:before,
      &:after {
        background: $color;
      }
    }
  }