其他分享
首页 > 其他分享> > vue3+vite配置全局scss

vue3+vite配置全局scss

作者:互联网

https://www.csdn.net/tags/MtTaEgzsMDY4MzA2LWJsb2cO0O0O.html

https://blog.csdn.net/m0_67393413/article/details/123433867?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-123433867-null-null.pc_agg_new_rank&utm_term=vite%E5%AE%89%E8%A3%85scss&spm=1000.2123.3001.4430

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>

标签:scss,--,rank,dev,install,vue3,save,vite
来源: https://www.cnblogs.com/dengronghua/p/16367569.html