1. 准备要用的变量和混入代码

如：

注：less混入就是，申明一段css代码（选择器包裹的代码）或者函数，在其他css选择器调用，可复用包裹的代码。

2. 在当前项目下执行一下命令vue add style-resources-loader，添加一个vuecli的插件

3. 安装完毕后会在vue.config.js中自动添加配置，如下：

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.join(__dirname, './src/assets/styles/variables.less'),
       path.join(__dirname, './src/assets/styles/mixins.less')
      ]
    }
  }
}

4. 重启项目

注：来源于黑马程序员