首先下载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>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐