使用less作為樣式工具，如果引入全域性樣式，那麼例如：
引入 reset.less，預設樣式不包含reset，並且部分使用者自己有一套reset樣式，因此需要在App.vue進行手動引入

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

但是使用less的一大優勢是使用變數來定義不同的值，然後進行全域性的呼叫使用
可以在每個檔案都用<style></style> 裡進行分別引用，使用是可以使用，但是build後會出現很多個該檔案的樣式，造成極大的冗餘。
也許你會想當然的把帶變數的樣式頁面放在App.vue

根據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>

如有更好的解決方案或不妥之處，還請留言共同探討~~