vue3+vite配置全局scss

首先下载scss，sass-loader，sass

npm install --save-dev sass-loader
npm install --save-dev node-sass
npm install --save-dev sass

打开vite.config.ts,添加下边代码，并重启服务

module.exports = {
  cssPreprocessOptions: {
    scss: {
      additionalData: '@import "./src/assets/scss/style.scss";' // 添加公共样式
    }
  }
}

页面中使用

<style lang='scss' scoped>
$redbg:pink;
.farther{
  color:$redbg;
  height: (10+10) *2px;
  &_span{
    font-size: 22px;
    color: $red
  }

  font: {
      size: 20px;
      weight: bold
  }
}
</style>