ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vuecl3 安装sass

2020-03-26 13:53:46  阅读:17  来源: 互联网

标签:scss sass color data global import vuecl3 安装



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";`

 



标签:scss,sass,color,data,global,import,vuecl3,安装
来源: https://www.cnblogs.com/zwn-lucky7/p/12573995.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有