简单使用
创建variable.scss
$base-menu-background: #304156;
:export {
menuBackground: $base-menu-background
}
在vue文件的style标签中,引入variable.scss
<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.app-wrapper {
height: 100%;
width: 100%;
}
.sidebar-container {
width: 200px;
height: 100%;
background-color: $base-menu-background;
position: fixed;
}
</style>
在vue文件的template标签中使用
<template>
<div>
<logo/>
<el-scrollbar class="scrollbar">
<el-menu
default-active="2"
:background-color="variables.menuBackground"
text-color="#fff"
:unique-opened="false"
active-text-color="#ffd04b">
...
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import Logo from '@/layout/components/SideBar/Logo'
import variables from '@/assets/styles/variables.scss'
export default {
name: 'SideBar',
components: { Logo },
computed: {
variables () {
return variables
}
}
}
</script>
<style lang="scss">
.scrollbar {
height: calc(100% - 50px);
}
.scrollbar .el-scrollbar__wrap {
overflow-x: hidden !important;
}
</style>
统一引入
variables.scss
$base-menu-background: #304156;
:export {
menuBackground: $base-menu-background
}
sidebar.scss
.sidebar-container {
width: 200px;
height: 100%;
background-color: $base-menu-background;
position: fixed;
.el-menu {
border: none;
}
}
index.scss
@import "variables.scss";
@import "sidebar.scss";
main.js中引入index.scss
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './permission'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/styles/index.scss'
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')