vue中css全局使用sass样式

1|0安装

cnpm i node-sass

cnpm i sass-loader

2|0使用

1. 在src/assets文件夹中创建global.scss文件(存放定义的css样式)
2. 在vue.config.js文件中定义css配置

   注意sass-loader的安装版本,如果是v8的版本使用prependDatea,以上的版本使用additionalData(翻译:额外的)的配置项

   module.exports = defineConfig({
     //使用es6相关的依赖
     transpileDependencies: true,
     //样式的配置
     css: {
       loaderOptions: {
         sass: {
           //sass-loader全局使用修改
           additionalData: `@import "~@/assets/styles/global.scss";`
         }
       }
     }
   })
   

3. 在vue文件中的使用

   <template>
     <div>
       <button>点击</button>
     </div>
   </template>
   
   <script>
   export default {
     name: "index"
   }
   </script>
   
   <style scoped lang="sass">
   button
     width: 200px
     height: 200px
     background-color: $gray
   </style>
   

   

3|0单独使用sass自定义样式

在每一style里面引入@import "~@/assets/styles/global.scss",不需要配置vue.config.js文件

<template>
  <div>
    <button>点击</button>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped lang="sass">
@import "~@/assets/styles/global.scss"
button
  width: 200px
  height: 200px
  background-color: $gray
</style>

 

a

__EOF__

本文作者：长安
本文链接：https://www.cnblogs.com/jingxin01/p/17109604.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！