Electron Fiddle启动preload编译错误及BlueprintJS依赖缺失求助

可行解决步骤： #

• 验证依赖文件路径
  先确认node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css是否存在：

  • Mac/Linux终端执行：ls node_modules/@blueprintjs/icons/lib/css
  • Windows终端执行：dir node_modules\@blueprintjs\icons\lib\css
    如果文件不存在，说明安装的@blueprintjs/icons版本与项目不兼容，找到package.json中指定的版本号，重新安装：

  npm install @blueprintjs/icons@<package.json中指定的版本号>
  

• 修改Less导入语法
  找到preload模块中导入该CSS的Less文件，将带~前缀的导入语句：

  @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
  

  修改为不带~的形式：

  @import "@blueprintjs/icons/lib/css/blueprint-icons.css";
  

  新版本的webpack和less-loader已支持直接解析node_modules中的模块，无需~前缀。

• 检查webpack配置
  确认项目（或preload模块单独的）webpack配置中，已正确配置模块解析路径：

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

• 清除缓存并重装依赖
  执行以下命令彻底清理依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

如果以上方法仍无效，对比package.json中webpack、less-loader、@blueprintjs/icons的版本兼容性，确保三者版本匹配。

内容的提问来源于stack exchange，提问作者胡苹旭