vue中css全局使用sass样式

安装

cnpm i node-sass

cnpm i sass-loader

使用

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>

   

单独使用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