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"时，html 文件中#theme 的href 会发生变化.但它不会更新或应用样式.我知道它与 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
推荐答案
我刚刚在本地完成了您的示例，在我将其更改为 后， 它开始工作.我首先认为您需要重新创建元素，但问题似乎出在类型type="text/scss" 似乎有问题>text/css
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 和 构建
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
此外，当您在 angular 中引用 scss 时，它会使用 webpack 编译为 css.
In addition When you refer to scss in your angular its compiled with webpack to css.
这篇关于Angular 4 CLI，WebPack，为整个网站动态切换引导主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
