React+Less+customize-cra环境下导入Less变量路径警告的解决办法

• 改用绝对路径导入
  将相对路径替换为基于项目根目录的绝对路径（根目录指包含src文件夹的顶层目录）：

  @import "/src/lessVariables/Blue.less";
  .Container { background: @blue500; }
  

• 配置Webpack别名简化导入（若使用Webpack构建）
  在Webpack配置文件中给变量目录设置别名，既解决路径问题又简化代码：

  const path = require('path');
  
  module.exports = {
    resolve: {
      alias: {
        '@lessVars': path.resolve(__dirname, 'src/lessVariables')
      }
    }
  };
  

  导入时用别名路径并加上~前缀（告知Webpack解析别名）：

  @import "~@lessVars/Blue.less";
  .Container { background: @blue500; }
  

• 配置Less Loader的搜索路径（若使用Webpack）
  在less-loader配置中添加paths选项，指定变量文件目录，导入时可直接写文件名：

  const path = require('path');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'less-loader',
              options: {
                paths: [path.resolve(__dirname, 'src/lessVariables')]
              }
            }
          ]
        }
      ]
    }
  };
  

  导入语句简化为：

  @import "Blue.less";
  .Container { background: @blue500; }
  

• 修正语法细节
  原始导入语句末尾缺少分号，Less要求语句结尾必须加分号，补上后可避免潜在语法问题。

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