时间戳

首页 > 解决方案 > 如何在打字稿中导入css

angular - 如何在打字稿中导入css

问题描述

我有全局 css 文件，我在其中定义了所有颜色。我试图在打字稿中导入该值，但它不起作用。这是我最后一次尝试：

get sideWindowStyle(): any {
    switch (this.windowStyle) {
      case 'classicStyle': {
        return {
          '@import' : 'src/styles-library/colors-variables.scss',
          'background-color': '$primary-lightest-color'
        };
      }
      case 'lightStyle': {
        return {
          'background-color': '#ffffff'
        };
      }
      default: {
        return {
          'background-color': '#f1f9fe'
        };
      }
    }
  }

如果没有导入或使用它，它仍然无法正常工作。

标签： angulartypescriptsass

解决方案

如果 window.style 是模板中的一个类，那么您可以使用 Host 实现所需的样式：

:host(.classicStyle) { 'background-color': '$primary-lightest-color' }
:host(.lightStyle) { 'background-color': '#ffffff' }
background-color: '#f1f9fe'

如果这两个类中的任何一个在元素的容器上，这段代码将自动更改您的背景颜色属性。

如果 window.style 是一个 TS 对象，那么根据它的值，将宿主元素的类更改为classicStyleorlightStyle然后给定的host代码将起作用。

推荐阅读