vue中使用全局css变量

scss-loader文档地址 webpack.docschina.org/loaders/sas…

1.简单粗暴型:直接在main.js(main.ts)中引入即可

// main.scss
$primary-color: #3360ff;
$default-color: #333;
.display-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

import '@/assets/css/main.scss';

2.通过配置文件引入(修改配置文件请重启项目)

在vue.config.js文件中添加:

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/assets/css/main.scss";`
      }
    }
  }
})

3.应用

<h1 class="display-center">This is an about page</h1>

<style lang="scss" scoped>
.contianer {
  color: $primary-color;
}
h1 {
  @extend .display-center;
}
</style>