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: 'less-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)
        }
    }
      // generate loader string to be used with extract text plugin
    function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

        if (loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            })
        }

        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less:  lessResourceLoader(), //这里的lessResourceLoader就是上面的方法
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }

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

• 再重新npm run dev下就好了

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