vue工具之vite 安装和配置scss

1、安装scss

npm install --save-dev sass sass-loader

2、创建文件

/assets/style/mixin.scss

var.scss页面

$default-color: #666666;

3、在vite.config.js里配置

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

4、使用

<style lang="scss" scope>
.title{
  color: $default_color;
}
</style>