在 scss 中使用 API 中的变量答案

【问题标题】：Using a variable from an API in scss在 scss 中使用 API 中的变量
【发布时间】：2020-06-25 03:35:32
【问题描述】：

我有一个已经存储在 api 上的路径。所以当我在打字稿中调用它时，我只需输入${var.image}/asset/image/image.png。但是如果我在我的 scss 中使用这个变量呢？我唯一能做的就是声明$imageUrl: '../asset/image'，并按如下方式使用它：

//This is main.scss
$imagesUrl: '../assets/images';
.this_container {
   background: url(#{imagesUrl}/image.png)
}

//This is the mainPage.tsx
import * as React from 'react';
import './style/main.scss'

class Component extends React.Component<any, any> {
  render(){
    return(
      <div className='this_container'>
        <h1>This is the Container</h1>
      </div>
    )
  }
}

export default Component

任何想法如何设置$var.imagesUrl，因为这会在 scss 中出现错误。

【问题讨论】：

你能把涉及的文件贴出来吗？
涉及两个文件。我有一个 mainPage.tsx，我在其中导入 main.scss 文件。
太棒了。您应该同时发布它们，以便人们可以帮助您并能够看到完整的图片
@Juan。我觉得你应该看看
我认为scss不可能做到这一点。 SCSS 文件被编译成 css 并且任何 API 调用肯定会发生在 javascript 端。

标签： reactjs typescript sass

【解决方案1】：

你少了一个$。你应该这样做

$imagesUrl: '../assets/images';
.this_container {
   background: url(#{$imageUrl}/image.png) 
}

【讨论】：

你错过了我的问题。据说，我有一个来自 api 的变量。我需要调用 declare #{$var.imagesUrl} 而不是 #{$imageUrl}
嘿，没有必要投反对票。您一开始没有提供任何代码或解释就发布了您的问题。我只是用你提供的超级有限的信息给出了合理的答案。有了新信息，我可以告诉您，您所要求的内容是不可能的，您可能需要进行一些有条件的重新渲染。阅读指南以创建更好的帖子，如果可能，我会要求您删除反对票，因为我试图在几乎没有您提供任何信息的情况下帮助您。