twitter-bootstrap – Angular 4 CLI,WebPack,为整个网站动态切

发布时间：2020-12-18 00:22:08 所属栏目：安全来源：网络整理

导读：我想为用户提供一个按钮来更改整个网站的主题.我正在使用bootstrap“.scss”文件. 这是我做的：我在“src / styles”文件夹中有“dark-styles.scss”和“light-styles.scss”.这两个文件都覆盖了我需要覆盖的类和方法,并且还从“node-module”导入默认值的

我想为用户提供一个按钮来更改整个网站的主题.我正在使用bootstrap“.scss”文件.
这是我做的：

我在“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文件的方式有关.有没有人遇到类似的情况或知道这个问题的解决方案.谢谢

解决方法

我刚刚在本地完成了你的例子,并且在我将它改为text / css后它似乎与type =“text / scss”有问题,它开始工作.我首先想到你需要重新创建元素,但问题似乎与类型有关

由于它的主题,我建议你使用这些文件的编译css版本将它们放入资源文件夹,angular-cli将它们复制到服务和构建

另外当你在你的angular中引用scss时,用webpack编译为css.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!