大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – Angular 4 CLI,WebPack,为整个网站动态切换bootstrap主题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我在“src / styles”文件夹中有“dark-styles.scss”和“light-styles.scss”.这两个文件都覆盖了我需要覆盖的类和方法,并且还从“node-module”导入默认值的“bootstrap.scss”.当我通过“.angular-cli.json”向应用程序提供任何这些文件时,如下所示;它完美地运作.
"styles": [
"../node_modules/font-awesome/css/font-awesome.css","../node_modules/@swimlane/ngx-datatable/release/index.css","../node_modules/@swimlane/ngx-datatable/release/assets/icons.css","../src/styles/dark-styles.scss"
],
要么,
"styles": [
"../node_modules/font-awesome/css/font-awesome.css","../src/styles/light-styles.scss"
],
但我想要实现的是动态允许用户更改主题.因此,基于stackoverflow中的其他答案;我在我的应用程序组件中访问了“文档”,这也是我的根组件.它允许我访问整个html页面,其中我有一个链接标记,我可以从app-component设置.
HTML文件
<head> <link id="theme" type="text/scss" rel="stylesheet" src=""> </head> <body> content ..... </body>
角cli.json
"styles": [
"../node_modules/font-awesome/css/font-awesome.css","../node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
],
应用程序,组件：
import { Component,OnInit,Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; @Component({ SELEctor: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],}) export class AppComponent implements OnInit { currentTheme: String; constructor( @Inject(DOCUMENT) private document) { } ngOnInit() { this.currentTheme = 'dark'; this.document.getElementById('theme').href = '../styles/dark-styles.scss'; } handelChangeTheme(event) { if (this.currentTheme === 'dark') { this.document.getElementById('theme').href = '../styles/light-styles.scss'; this.currentTheme = 'light'; console.log('light'); } else { this.document.getElementById('theme').href = '../styles/dark-styles.scss'; this.currentTheme = 'dark'; console.log('dark'); } } }
在触发事件“handleChangeTheme”时,#theme的href在html文件中发生变化.但它不会更新或应用样式.我知道它与WebPack及其编译scss文件的方式有关.有没有人遇到类似的情况或知道这个问题的解决方案.谢谢
以上是大佬教程为你收集整理的twitter-bootstrap – Angular 4 CLI,WebPack,为整个网站动态切换bootstrap主题全部内容，希望文章能够帮你解决twitter-bootstrap – Angular 4 CLI,WebPack,为整个网站动态切换bootstrap主题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。