Angular 4 CLI，WebPack，动态切换整个网站的引导主题 [英] Angular 4 CLI, WebPack, switching bootstrap theme dynamically for the entire website
问题描述
我想为用户提供一个按钮来更改整个网站的主题.我正在为所有内容使用引导程序".scss"文件. 这是我所做的:
I want to provide users with a button to change the theme of the entire website. I am using bootstrap ".scss" files for everything. Here is what I have done:
我在"src/styles"文件夹中有"dark-styles.scss"和"light-styles.scss".这两个文件都覆盖了我需要覆盖的类和方法，并且还从默认值的"node-module"中导入了"bootstrap.scss".当我通过".angular-cli.json"将这些文件中的任何一个提供给应用程序时，如下所示；它完美地工作.
I have "dark-styles.scss" and "light-styles.scss" in "src/styles" folder. Both of these files override the classes and methods that I need to override and also import the "bootstrap.scss" from "node-module" for the defaults. When I provide any of these file to the application through ".angular-cli.json" like below; it works perfectly.
"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",
"../node_modules/@swimlane/ngx-datatable/release/index.css",
"../node_modules/@swimlane/ngx-datatable/release/assets/icons.css",
"../src/styles/light-styles.scss"
],
如果我提供深色，则主题为深色，如果我提供浅色，则主题为浅.
If I provide the dark the theme is dark and if I provide light the theme is light.
但是我要实现的是动态地允许用户更改主题.因此，基于stackoverflow中的其他答案；我在我的应用程序组件(也是我的根组件)中访问了文档".它使我可以访问整个html页面，其中有一个链接标记，可以从应用程序组件中进行设置.
But what I want to achieve is dynamically allow the users to change the theme. Hence, based on other answers in stackoverflow; I accessed the "document" in my app component which is also my root component. It gives me access to the entire html page where I have a link tag which I can set from the app-component.
HTML文件
<head>
<link id="theme" type="text/scss" rel="stylesheet" src="">
</head>
<body>
content .....
</body>
Angular-cli.json
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"
],
应用程序组件:
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文件的方式有关.是否有人遇到过类似情况或知道此问题的解决方案.谢谢
While triggering the event "handleChangeTheme" the href for the #theme changes in the html file. But it does not update or apply the styles. I understand that it has something to do with WebPack and the way it compiles the scss files. Has anybody faced the similar situation or know the solution to this issue. Thanks
推荐答案
我刚刚在本地完成了您的示例，并且在将它更改为text/css后，它似乎开始工作了，而type="text/scss"似乎有问题.我首先认为您需要重新创建元素，但问题似乎与类型
I just done your example locally and seems to be issue with type="text/scss" after i changed it to text/css it starts working. I thought firstly that you need to recreate element but issue seems to be with type
由于其主题，我建议您使用这些文件的已编译CSS版本将它们放入assets文件夹，而angular-cli将它们复制到serve和build
Since its theme i would recommend you to use compiled css versions of those files put them into assets folder and angular-cli will copy them on serve and build
此外，当您用角度引用scss时，它是通过webpack编译为css的.
In addition When you refer to scss in your angular its compiled with webpack to css.
这篇关于Angular 4 CLI，WebPack，动态切换整个网站的引导主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
