将外部 scss 文件中的样式添加到 SVG.js 元素答案

【问题标题】：Add style from external scss file to SVG.js element将外部 scss 文件中的样式添加到 SVG.js 元素
【发布时间】：2017-11-13 08:22:12
【问题描述】：

我创建一个 svg 并使用 SVG.js 添加一个路径，如下所示。

this.roomPlan = SVG('roomPlan').attr('id','roomPlanSvg').size(1024, 
768);
this.roomPlan.path(room.area.d);

我有一个外部.scss 文件，我有一些样式如下；

.room-bg {
  fill: nb-theme(card-bg);
  stroke: transparent;
  cursor: pointer;
  stroke-width: 4px;
}

我想将.room-bg 选择器作为类添加到我的路径元素中，就像其他html 一样。例如;

<path class="room-bg" />

注意：我正在开发 Angular2-Typescript 应用程序，并将 SVG.js 添加到项目中作为 npm 包。

感谢您的帮助。

【问题讨论】：

【解决方案1】：

你应该能够做到：

this.roomPlan.path(room.area.d).addClass("room-bg");

参见：[http://svgjs.dev/manipulating/#addclass]

【讨论】：

我试过这个但没有。我的样式在 scss 文件中。
İ如果我将我的样式放入 .css 文件 addClass 方法可以正常工作，但我的样式必须在 scss 文件中 addClass 方法不适用于 scss 文件。
scss 文件通常会在您构建应用程序时编译为 css。浏览器不使用 scss 文件。
如何使用 scss 样式
阅读 sass 文档以了解如何使用 scss 文件。