1 使用预处理

如果创建项目时没有选择需要的预处理器（Sass/Less/Stylus），则需手动安装相应loader

安装 Sass：npm install -D sass-loader node-sass

安装 Less ：npm install -D less-loader less

安装 Stylus：npm install -D stylus-loader stylus

<style lang="scss">
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
</style>

2 自动化导入样式

自动化导入样式文件 (用于颜色、变量、mixin等)，可以使用 style-resources-loader。

npm i -D style-resources-loader

//  vue.config.js  配置
const path = require('path')
// 自动化导入样式文件 (用于颜色、变量、mixin等)，
function addStyleResource(rule) {
    rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
        patterns: [
        path.resolve(__dirname, './src/styles/imports.scss'),
        ],
    })
}
module.exports = {
    // webpackage 配置
    // 自动化导入样式
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type =>
        addStyleResource(config.module.rule('scss').oneOf(type)))
    },
        
}

// imports.scss
$color:rgb(151, 133, 144);

// 示例
background: $color;

3 Scoped CSS

当标签有scoped属性时，它的CSS只作用于当前组件中的元素。

<style scoped >
 /* 当前样式 */
  .app{
     color:red;
  }
</style>
<style>
/*全局样式*/
</style>

//当前组件中可以混用本地和全局

-- 修改源码一种解决方案

// 深度作用器，使用 >>> 操作符可以使scoped样式中的一个选择器能够作用的"更深"，如影响子组件
.home >>> p{  
  color:red;
}

Sass 之类的预处理器无法正确解析 >>> 。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符 取而代之
.home /deep/ p{
  color:red;
}