Question

我有全局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'
        };
      }
    }
  }

没有导入或没有导入仍然无法正常工作。

Answer 1

在构建期间将其转换为CSS，然后将该文件链接到您的index.html文件中：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/colors-variables.css">
</head>
<body>
</body>
</html>

Answer 2

sass变量将在构建ant期间进行编译，因此在运行时将无法访问，因此您可以使用css变量?

style.scss

:root {
  --primary-lightest-color: brown;
}

sideWindowStyle

get sideWindowStyle(): any {
    switch (this.windowStyle) {
      case 'classicStyle': {
        return {
          'background-color': 'var(--primary-lightest-color);'
        };
      }
      case 'lightStyle': {
        return {
          'background-color': '#ffffff'
        };
      }
      default: {
        return {
          'background-color': '#f1f9fe'
        };
      }
    }
  }

CSS variables MDN ?

Answer 3

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

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

如果这两个类中的任何一个位于您元素的容器中，那么这段代码将自动更改background-color属性。

如果window.style是TS对象，则根据其值，将宿主元素的类更改为classicStyle或lightStyle，然后给定的host代码将起作用。 / p>

如何在打字稿中导入CSS

3 个答案: