Angular 6生产模式删除引导样例主题?
我有一个Angular 6应用程序,使用Bootstrap 4和Bootswatch主题()。当我在测试环境中使用Angular 6生产模式删除引导样例主题?,angular,bootswatch,Angular,Bootswatch,我有一个Angular 6应用程序,使用Bootstrap 4和Bootswatch主题()。当我在测试环境中使用ngserve编译站点时,样式和主题工作正常,当使用ngbuild为我的nginxwebserver编译站点时,样式和主题工作正常。但是,在Web服务器的生产模式(ng build--prod)下编译时,基本引导样式可以工作,但引导样例主题显然没有加载或无效。该网站看起来像普通的引导4 我使用Angular CLI的安装过程是: npm install --save bootstra
ngserve
编译站点时,样式和主题工作正常,当使用ngbuild
为我的nginxwebserver编译站点时,样式和主题工作正常。但是,在Web服务器的生产模式(ng build--prod
)下编译时,基本引导样式可以工作,但引导样例主题显然没有加载或无效。该网站看起来像普通的引导4
我使用Angular CLI的安装过程是:
npm install --save bootstrap
npm install --save @ng-boostrap/ng-bootstrap
npm install bootswatch
myangular.json
的“样式”部分如下所示:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootswatch/dist/lumen/bootstrap.min.css",
"src/styles.css"
],
破坏我主题的制作模式是怎么回事?我如何解决它?
编辑:我的package.json
,按注释要求:
{
"name": "neo-analytics",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^2.1.1",
"bootstrap": "^4.1.1",
"bootswatch": "^4.1.1",
"core-js": "^2.5.4",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
您可以尝试在styles.css中添加以下内容,而不是直接在angular.json中的styles[]下添加: styles.css
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/bootswatch/dist/lumen/bootstrap.min.css";
angular.json
"styles": [
"styles.css"
],
当然是:
"styles": [
"src/styles.css"
],
我知道这是一个迟来的答案,但被接受的答案是错误的。您应该将原始的
bootstrap.min.css
替换为Bootswatch。Bootsatch的CSS文件应该替换原始的引导CSS文件。因此,在angular.json
中,您只需要:
"styles": [
"node_modules/bootswatch/dist/lumen/bootstrap.min.css",
"src/styles.css"
],
您可以共享您的package.json来检查依赖关系吗?还要注意,如果您希望产品构建中包含某些内容,请不要将其包含在devdependency中,而应将其包含在package.json的依赖关系部分。我已将package.json的内容添加到问题中。您确定
dist
中存在“node_modules/bootswatch/dist/lumen/bootstrap.min.css“
?你说的bootswatch主题代替bootstrap本身是对的,但是,我认为我在2018年遇到的问题是导入在angular.json
中不起作用,必须移动到styles.css
@Avinash,bootswatch css文件应该取代原始的bootstrap css。您要做的是首先添加引导css,然后用引导样例覆盖它。这显然是错误的。