鍍金池/ 問答/HTML/ 當(dāng)前roadhog是否有方法對less-loader進(jìn)行配置,為了定義globa

當(dāng)前roadhog是否有方法對less-loader進(jìn)行配置,為了定義globalVars

在項(xiàng)目組件文件夾層級相對有點(diǎn)深的時(shí)候,在less文件引入全局的less變量配置文件時(shí),需要定義很長的相對路徑。比如說像這樣:'../../../../styles/variables',不僅需要去計(jì)算層級,而且在文件位置發(fā)生修改時(shí)也需要相應(yīng)的去做修改。

如果能夠通過配置less-loader定義一個(gè)全局的globalVar,比如說@src: '當(dāng)前webpack工程目錄'。然后在引用時(shí)像這樣導(dǎo)入less文件@{src}/styles/variables,編碼會更舒服一些。

當(dāng)前有什么方案嗎?

回答
編輯回答
厭惡我

大致思路是,通過在工程目錄下增加一個(gè)webpack.config.js來對roadhog的webpack配置進(jìn)行擴(kuò)展。給resolve配置的extensions添加.less文件后綴,使其能夠處理.less文件的引用。
默認(rèn)情況下,less-loader在給出了paths配置的情況下,不會使用webpack resolver進(jìn)行文件解析。因此,別名配置在該情況下無效。

實(shí)際解決方案:
在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;
};

在項(xiàng)目任意位置的.less文件:

// 能夠引入工程目錄下的./src/styles/vars.less文件
@import '~@/styles/vars';
2018年4月16日 12:26