vuecl3 安装sass

Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 global.scss

$theme-color: #efefef;

编辑vue.config.js


module.exports = { // ... css: { loaderOptions: { sass: { // 根据自己样式文件的位置调整 data: `@import "@/styles/global.scss";` } } } };

现在就可以在任意地方使用global.scss中定义的变量了

<template>
  <div class="box"></div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="scss">
.box {
  background-color: $theme-color;
}
</style>

新版sass-loader坑

// 旧
data: `@import "~@/assets/scss/variables.scss";`
// 新
prependData: `@import "~@/assets/scss/variables.scss";`

 

上一篇:Sass/SCSS:让CSS书写更高效


下一篇:vue 安装scss 报错 TypeError: this.getResolve is not a function 解决