vue2+less开发，使用vux-loader，配置全局less变量

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012396955/article/details/80184701

使用less作为样式工具，如果引入全局样式，那么例如：
引入 reset.less，默认样式不包含reset，并且部分用户自己有一套reset样式，因此需要在App.vue进行手动引入

<style lang="less">
@import 'src/styles/reset.less';
</style>

但是使用less的一大优势是使用变量来定义不同的值，然后进行全局的调用使用
可以在每个文件都用<style></style> 里进行分别引用，使用是可以使用，但是build后会出现很多个该文件的样式，造成极大的冗余。
也许你会想当然的把带变量的样式页面放在App.vue或其他vue页面里想要统一使用，然而vue在build的时候根本就找不到你定义的变量，因为我用的vux组件库，所以，在这我就说说用vux来进行的解决方案吧

根据vux的使用要求，我对项目进行了手动配置，配置过程基本如下：

初始化基本的vue项目(网上有很多帖子，这里就不再赘述)之后，

安装vux

npm install vux --save

安装 less-loader

npm install less less-loader --save-dev

安装vux-loader

npm install vux-loader --save-dev

vux-loader工具的作用是对.vue代码进行预处理，不限于 vux 组件库。

它是针对webpack+vue-loader项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。

下面配置vux-loader：

引入vux-loader

const vuxLoader = require('vux-loader')

在build/webpack.base.conf.js 文件中，将整个module.export的内容赋给一个变量，比如originalConfig，

然后在该文件的最下方如下配置：

代码如下：

const webpackConfig = originalConfig; // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {

  options: {},
  plugins: [
    {name: 'vux-ui'},
    {name: 'less-theme', path: 'src/common/less/theme.less'},
    {name: 'duplicate-style'}
  ]
})

上图中的theme.less既是有全局变量的文件，到此配置完成！！
下面来看效果：

 <p class="font">项目</p>

如有更好的解决方案或不妥之处，还请留言共同探讨~~