🐛[BUG]去掉less文件中的~ alias

[rzyanhao]

trafficstars

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

less-loader 的 ~ alias已经废弃了，像esbuild-plugin-less 都是不支持的，需要去掉

📷 复现步骤

🏞 期望结果

去掉less文件中的~ alias

💻 复现代码

© 版本信息

• ProComponents 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#5543][去掉less文件中的~ alias][100%]

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

针对该问题，可以尝试以下解决方案：

1. 使用 tilde-importer 可以在 less-loader 中使用 tilde-importer 插件，该插件将 ~ alias 路径作为绝对路径进行解析，从而避免了在 esbuild-plugin-less 中的问题。安装 tilde-importer:

npm install -D [email protected]
npm install -D less-tilde-importer

在 webpack.config.js 中配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
              webpackImporter: false,
              // less-tilde-importer 插件会解析 ~ 路径
              // 然后将它转换为绝对路径
              plugins: [new (require('less-tilde-importer'))()],
            },
          },
        ],
      },
    ],
  },
};

2. 解析路径中的 ~ 可以使用正则表达式将 ~ alias 路径上的 ~ 去掉，例如：

const path = require('path');
const lessRegex = /\.less$/;

// ...

{
  test: lessRegex,
  include: path.resolve(__dirname, 'src'),
  use: [
    ...
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          // 如果设置为 true，~ 路径将被解析为模块路径
          // 请避免使用 ~ alias
          javascriptEnabled: true,
        },
        // 解析 ~ 路径
        modifyVars: {},
        paths: [
          // less 的自定义函数，需要放在 paths 中
          path.resolve(__dirname, 'src/common/styles/mixins.less'),
          path.resolve(__dirname, 'src'),
          `!${path.resolve(__dirname, 'src/styles/color.less')}`,
        ],

        // 将 ~ 前缀去掉
        modifyVars: {
          hack: `true; @import "${path.resolve(__dirname, 'src/common/styles/variables.less').replace(/~/g, '')}";`,
        }
      },
    },
  ],
},

3. 改用 Sass 如果使用 Sass 的话，就不会遇到这个 ~ alias 的问题了。需要安装 sass-loader 和 node-sass：

npm install sass-loader node-sass -D

webpack.config.js 中的配置类似：

{
  test: /\.scss$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: 'sass-loader',
    },
  ],
},

以上解决方案可以帮助你去掉 less 文件中的 ~ alias，如果还有问题可以再提出来哦。