如果你使用的是less或sass定义了一些变量或者函数的时候在调用的过程中需要在每次引用导入的时候都要import这个文件
这样的话就非常麻烦

其实vue-cil中提供了一个插件可以自动把你定义的样式文件导入到所有vue的组件中

执行命令

vue add style-resources-loader

可能出现现在还有代码未提交，是否继续，，选择y
继续选择使用的预处理器，，，，选择less
等待安装完成，查看vue.config.js文件

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

在vue.config.js文件中增加需要注入的less文件即可

+ 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')
      ]
    }
  }
}

现在我们可以直接在vue组件中使用函数或变量了

<style lang="less" scoped>
h1 {
  background-color: @warnColor;
  .hoverShadow(); //直接使用
}
</style>

vue-cli自动导入样式文件

现在我们可以直接在vue组件中使用函数或变量了