Vue2.0 less全局配置

前言

再一次vue2.0的開發中，遇到這樣的一個問題，使用less與處理器，封裝了一套關於項目的主題，但是使用的時候，main.js中引入后依然不能直接使用定義的@theme-bg等less定義的顏色，經過查閱后，我么需要進行一些配置，百度上找了很多方法，但是都有一些問題，這里經過實踐總結，總結在這，以此記錄自己的開發點擊

配置前的准備

 

npm install less less-loader -s

 

百度上很多方法說需要配置webpack.base.conf.js（建議省略）

 

{
  test  : /\.less$/,
  loader: "style-loader!css-loader!less-loader",
}

需要將上面的代碼加入到rules中，但是博主在嘗試后，終端報錯：

 

因此博主這里配置的時候是沒有添加這段代碼的，繼續往下走

 

打開utils.js進行配置 

 

  // 配置less

  

function lessResourceLoader() {
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/styles/base/skin.less'),
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

將上述代碼添加到exports.cssLoaders中，然后找到return修改代碼less:lessResourceLoader(), 在main.js中添加. 

require('!style-loader!css-loader!less-loader!./styles/index.less'); //導入全局樣式

這里添加的樣式是全部的，通過@import引入的所有的樣式文件 在utils.js中添加的路徑是自己寫的皮膚樣式文件

配置完成，在一個頁面中，嘗試使用我們的樣式，background-color： @bg-theme-blue;

錦囊：如果走完一切發現還是行不通，那博主給大家推薦一個源碼，大家可以查看着進行修改：

https://github.com/gershonv/vue-project