最近开始使用Aurelia并且我在导入bootstrap 4时遇到了一些问题 . 我使用Aurelia-CLI设置了应用程序,其中包括typescript和基本的webpack设置 .
我最初尝试按照这里的指南:https://aureliacasts.com/blog/2018/01/05/aurelia-app-with-bootstrap-4/但最终出现错误“找不到模块:错误:可以't resolve ' bootstrap / css / bootstrap.css ' in ' C:\ project \ app \ src'
我用npm安装了jQuery,Bootstrap和Popper:
npm i jquery bootstrap popper.js --save
我修改了我的/aurelia_project/aurelia.json文件以包含以下依赖项:
"dependencies": [
"jquery",
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper.min"
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
在我的app.ts我有
import { PLATFORM } from 'aurelia-pal';
import { Router, RouterConfiguration } from 'aurelia-router';
import 'bootstrap';
export class App {
public router: Router;
public configureRouter(config: RouterConfiguration, router: Router){
config.title = 'My second app';
config.options.pushState = true;
config.map([
{ route: ['','home'], name: 'home', moduleId: PLATFORM.moduleName('routes/home/index'), nav: true, title: 'Home'},
{ route: 'about', name: 'about', moduleId: PLATFORM.moduleName('routes/about/index'), nav:true, title: 'About'}
]);
this.router = router;
}
}
最后在我的app.html中我有:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<!-- Top navigation -->
<require from="./components/top-navigation/top-navigation.html"></require>
<top-navigation router.bind="router"></top-navigation>
<!-- Renderpage -->
<router-view></router-view>
</template>
修改aurelia.json文件后,我确保停止AU并重新启动 "au run --watch"
但是我仍然遇到以下错误:
./src/app.html中的错误找不到模块:错误:无法解析'C:\ project \ app \ src'@ ./src/app.html @中的'bootstrap / css / bootstrap.css' . /src/app.ts @ ./src/main.ts @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js @ multi aurelia-webpack-plugin / runtime / empty-entry aurelia-webpack-plugin / runtime / pal-loader-entry aurelia-webpack-plugin / runtime / empty-entry aurelia-webpack-plugin / runtime / pal-loader-entry aurelia-bootstrapper
1 回答
如果其他人应该偶然发现这个问题,我使用webpack解决了这个问题 .
我删除了/aurelia_project/aurelia.json下的“依赖项” .
我删除了
来自app.html,并从app.ts中删除了以下内容:
然后在webpack.config.js中我将const cssRules修改为(添加了postcss-loader和options,将jquery和boostrap添加到module.exports - > entry - > vendor,并在模块规则下我全局公开jquery):
最后一步是在main.ts的顶部导入boostrap: