Aurelia-CLI导入Bootstrap 4提示模块未找到的问题求助

你这是踩了Aurelia CLI打包模式的坑啦——你的项目用的是Webpack模板，但你却在修改针对RequireJS/SystemJS的aurelia.json文件，这就是问题根源！Webpack项目根本不会读取aurelia.json的依赖配置，所以你的修改完全没生效，还因为路径错误触发了报错。

下面给你一步步来修正：

1. 先清理无效配置 #

把你添加到/aurelia_project/aurelia.json里的jQuery、Popper.js和Bootstrap依赖配置全部删掉，这个文件对Webpack项目来说没用。

2. 配置Webpack自动注入依赖 #

打开项目根目录的webpack.config.js，找到plugins数组，添加ProvidePlugin让Webpack自动把jQuery和Popper注入全局，满足Bootstrap的依赖需求：

const webpack = require('webpack');

module.exports = {
  // ... 其他已有配置
  plugins: [
    // ... 项目原有的插件
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'] // 注意Popper的导出格式
    })
  ]
};

3. 正确导入Bootstrap #

在你的app.ts（或者入口文件main.ts）里直接导入Bootstrap的CSS和JS，路径要对应node_modules里的实际位置：

// 导入Bootstrap样式文件
import 'bootstrap/dist/css/bootstrap.css';
// 导入Bootstrap的JS组件
import 'bootstrap';

4. 重启开发服务 #

重新运行au run --watch，这次应该就不会再出现模块未找到的错误了。

为啥之前的方法行不通？ #

• Webpack项目的依赖解析靠webpack.config.js和node_modules，完全不读aurelia.json；
• 你之前写的导入路径bootstrap/css/bootstrap.css是错的，Bootstrap的CSS实际在bootstrap/dist/css/目录下；
• 修改aurelia.json的方式只适用于Aurelia CLI的RequireJS模板项目，Webpack项目根本不需要这一步。

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