配置Webpack别名@后，能否在<style>中导入Less文件？

当然可以！不过默认情况下，webpack的resolve.alias只对JS模块的import生效，Less里的@import并不会自动识别这些别名，得稍微配置一下loader才行。

具体配置步骤 #

假设你已经在webpack.base.config.js里配置好了resolve.alias的@指向src目录，接下来只需要修改处理Less的loader规则：

1. 找到你webpack配置中处理.less文件的规则（一般在module.rules里）
2. 给less-loader添加webpackImporter: true的选项，让它使用webpack的解析器来处理路径，这样就能识别你配置的别名了。

修改后的loader规则大概长这样：

module: {
  rules: [
    // 其他规则...
    {
      test: /\.less$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            webpackImporter: true, // 关键配置：让less-loader用webpack的解析逻辑
          }
        }
      ]
    }
  ]
}

配置完怎么用？ #

现在你就可以在<style lang="less">里直接用@别名导入文件了，比如：

<style lang="less">
@import '@/styles/common.less';
@import '@/components/Button/button.less';
</style>

额外小技巧 #

如果不想改loader配置，也可以在@import里加~前缀，告诉webpack这是一个模块路径，同样能解析别名：

@import '~@/styles/common.less';

不过这种方式每次都要加~，还是配置loader更省心。

内容的提问来源于stack exchange，提问作者user7693832