为啥在 TypeScript 中导入 CSS 不起作用？

Posted 2023-03-13

【中文标题】为啥在 TypeScript 中导入 CSS 不起作用？

【英文标题】：Why does not work import CSS in TypeScript?为什么在 TypeScript 中导入 CSS 不起作用？

【发布时间】：2020-04-14 13:51:10

【问题描述】：

我尝试在.ts文件中导入scss样式：

import style from "./map.scss";

此文件包含：

.Map 
  z-index: 1;
  position: absolute;

我收到消息：

map.scss"' 没有默认导出。

我想在 Ts 中使用这个 CSS 属性，例如：

DOMFunction.createElement("div", id: "map", class: style.Map );

style.Map 是我需要的财产

【问题讨论】：

您不能在 TS 文件中导入 SCSS 样式，因为 SCSS 不是 TS/JS 代码。

如果要写附加文件：map.scss.d.ts我可以

只做 => 导入 "./map.scss";

一条评论 DOMFunction.createElement("div", id: "map");并将样式设置为 #map z-index: 1;位置：绝对； 它会自动添加 id map css 到它

如果需要添加类 .Map z-index: 1;位置：绝对； 然后让 element = DOMFunction.createElement("div", id: "map") 然后 element.classList.add("Map");

【参考方案1】：

如果要导入.scss 文件，则应将其包含在全局样式表中：

styles.scss：

@import url('./map.scss');

更新：

如果你想在 Typescript 中访问 SASS 值（$colors from variables.scss），那么you can read here

您也可以使用ngStyle 自行设置样式：

<div [ngStyle]=" 'width': 'calc(100% - ' + yourVariable + 'px)' "></div>

【讨论】：

在ts里面导入？我需要在 ts 文件中获取 CSS 属性作为变量