vue---scss+element-ui

加载顺序

• 如上的加载顺序和引入顺序一致，先加载app里面的样式文件，再加载路由组件(非异步)里面的，最后加载 assets/main.css

修改组件样式

• 全局覆盖

import 'element-ui/lib/theme-chalk/index.css';
import '../assets/reset.scss';

• 在.vue文件中修改,作用于外层盒子样式

// 给最外层的div加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改
<template>
	<div id="home">
            <el-table>
            </el-table>
        </div>
</template>

<style>
    /* 修改element-ui中table组件的样式 */
    #home .el-table tbody tr:hover>td {
            cursor: pointer;
    }
    #home .el-form .el-form-item  .el-input__inner:focus{
             border: 1px solid #3D66E4;
       }
</style>

• 深度作用选择器,修改组件的内层盒子样式

<style lang="scss" scoped>
#conBox ::v-deep .el-input__inner {
  padding: 0 10px;
}
</style>

scss

• 注意版本号不兼容可能会导致报错，node必须和sass-loader等版本对应，不然也会报错

 "node-sass": "^4.14.1",
 "sass-loader": "^7.3.1",
 "style-loader": "^3.3.1",

• 嵌套(在嵌套时候可以使用 & 来引用父元素)

.container { 
    &>p { //可以编译成CSS的 .container>p {} 效果 
    color:purple; 
    } 
  }

• 变量(声明变量的语法是：$+变量名+：+变量值；如下

$color:red; //声明变量 
.father { color:$color; }

• 变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹

$left:left; 
.father{ 
   border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明 
 }

• 可以配合js修改的变量 --

/* 定义全局的css变量 */
:root {
  /* 按钮色彩 */
  --theme_button_color: pink;
}

#app {
  text-align: center;
  /* 定义全局的css变量 var(--变量, 默认值)*/
  color: var(--theme_button_color);
  #nav {
    padding: 30px;
  }
}

<template>
    <el-radio-group v-model="themeValue" @change='changeTheme'>
      <el-radio :label="'blue'">blue</el-radio>
      <el-radio :label="'green'">green</el-radio>
      <el-radio :label="'red'">red</el-radio>
    </el-radio-group>
</template>    
    
//换肤功能。设置父辈style 
changeTheme (val) {
  document.documentElement.style.setProperty("--theme_button_color", val);
}

• 继承 使用 @extend

.container { 
  color:purple; 
  border:2px dashed purple; 
 } 
.myText { 
  @extend .container; //这里将继承.container类的所有样式 
  font-size: 22px; 
}

• 重复代码块，使用混合@mixin命令定义，以及使用@include调用该mixin

@mixin normalStyle { 
//使用@mixin命令定义可重复使用的代码块 
    width:300px; 
    height:100px; 
    color:black; 
    background-color:lightblue;
} 
.container { 
    @include normalStyle; //使用@include 命令引用@mixin定义的代码块 
}

scss变量全局化

• 建立变量文件

• 添加 vue.config.js 配置项

css: {
    loaderOptions: {
      sass: {
        // sass-loader 8版本后使用 prependData 
        //prependData: '@import "@/assets/css/variable.scss";'
        data: '@import "@/assets/css/variable.scss";'
      }
    }
  },

• 使用

// scss中使用
<style lang="scss">
p {
  background: $themeColor;
}
</style>

// js中使用
<script>
import publicStyles from '@/assets/css/variable.scss'

export default {
  created () {
    // 'blue'
    console.log('publicStyles', publicStyles.themeColor);
  },
};
</script>