vue-cli中使用Less全局变量,无需一次次导入

在vue开发前期准备工作中..遇到这样个问题。想把共有的变量封装在variable.less里。还有extends.less等其他文件，把他们统一放置layout.less然后在app页引用。在app页成功的引用到里头的变量以及封装的函数，但在子组件中，会报变量undefined错。尝试过在入口js导入那个共有less，也尝试过使用文件的引用来获取，但都没有效果。如果在子组件中导入一次共有变量的话，行得通。但，这不是我想要的。如果有多个组件的，一个个导入就太麻烦了，也使得该项目的大小增加了不少，运行速度当然可想而知..经过一早上的查找和尝试,终于找到一种方法。

接下来就分享下我的方法把~

• npm install sass-resources-loader --save-dev
• 在目录结构的build/utils.js 中 exports.cssLoaders模块中再加多一个函数

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

其中'../src/styles/shared/variable.less'路径改成自己对应的文件
然后再return{}块中的less: generateLoaders('less') 替换成 less: lessResourceLoader()

• 再重新npm run dev下就好了

sass 也是一样的道理。把less-loader改为sass-loader即可。