九十、vue-cli3中使用sass全局变量

一、编写全局scss变量

/src/common/global.csss

$c-bg: #FF3259;
$c-text-w: #ffffff;
$c-text-E: #ECECEC;
$c-content-w: 1205PX;
$c-content-m: 375px;

           

二、vue.config.js引入全局scss

vue.config.js

module.exports = {
  publicPath: './', // 默认'/'，部署应用包时的基本 URL
  productionSourceMap: false,
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/common/global.scss";
        `
      }
    }
  }
}
           

三、css中使用

/src/view/home.vue

<template>
  <div class="about">
    <div class="demo"></div>
  </div>
</template>
<style scoped lang=scss>
.demo {
  width: $c-content-m;
  height: $c-content-m;
  background: $c-bg;
}
</style>
           

最后推荐一个 js常用的utils合集，帮我点个star吧~

• github
• 文档