vue中引入css变量_scss $base-menu-backgroundimg

简单使用

创建variable.scss

$base-menu-background: #304156;

:export {
  menuBackground: $base-menu-background
}
1
2
3
4
5

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

统一引入

variables.scss

$base-menu-background: #304156;

:export {
  menuBackground: $base-menu-background
}
1
2
3
4
5

sidebar.scss

.sidebar-container {
  width: 200px;
  height: 100%;
  background-color: $base-menu-background;
  position: fixed;
  .el-menu {
    border: none;
  }
}
1
2
3
4
5
6
7
8
9

index.scss

@import "variables.scss";
@import "sidebar.scss";
1
2

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')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23