当前roadhog是否有方法对less-loader进行配置，为了定义globalVars

Question

在项目组件文件夹层级相对有点深的时候，在less文件引入全局的less变量配置文件时，需要定义很长的相对路径。比如说像这样：'../../../../styles/variables'，不仅需要去计算层级，而且在文件位置发生修改时也需要相应的去做修改。

如果能够通过配置less-loader定义一个全局的globalVar，比如说@src: '当前webpack工程目录'。然后在引用时像这样导入less文件@{src}/styles/variables，编码会更舒服一些。

当前有什么方案吗？

Answer 1

大致思路是，通过在工程目录下增加一个webpack.config.js来对roadhog的webpack配置进行扩展。给resolve配置的extensions添加.less文件后缀，使其能够处理.less文件的引用。
默认情况下，less-loader在给出了paths配置的情况下，不会使用webpack resolver进行文件解析。因此，别名配置在该情况下无效。

实际解决方案：
在roadhog配置.webpackrc.js中：

alias: {
    '@': path.resolve('./src'),
    assets: path.resolve('./public/assets/'),
},

在webpack.config.js中：

module.exports = function(webpackConfig, env) {
  webpackConfig.resolve.extensions.push('.less');

  return webpackConfig;
};

在项目任意位置的.less文件：

// 能够引入工程目录下的./src/styles/vars.less文件
@import '~@/styles/vars';

Answer 2

// vue.config.js

const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/variables.less'),
      ],
    })
}