在 PHPStorm 中使用 SASS 解决资产定位问题

Posted 2023-03-06

【中文标题】在 PHPStorm 中使用 SASS 解决资产定位问题

【英文标题】：Resolving asset location issues using SASS in PHPStorm

【发布时间】：2014-01-21 01:02:18

【问题描述】：

我有一个项目，其基本资产文件夹结构如下所示：

/css
/css/sass
/js
/images

当我编译 SASS 文件时，它会将它们放到上面的 css 文件夹中。我这样做是为了让我的目录结构保持逻辑和简单。

我在我的 SASS 文件中使用相对路径来链接到图像：

background: url(../images/foobar.png);

但是，由于路径是相对于 CSS 目录的，phpStorm 将其标记为错误。

是否有任何方法可以配置 PHPStorm 以识别来自目标路径的资产，而不仅仅是直接来自 SASS 文件？

【问题讨论】：

使用相对于网站根目录的路径（即url(/images/foobar.png);）？ ...或将sass 文件夹保存在与css 相同的级别。

我正在处理的项目是一个遗留的 Kohana 2.3 应用程序，因此它使用级联文件系统，因此使用相对于根目录的路径是禁忌。我可以将 sass 文件夹提升一个级别，我只是想知道是否有办法配置 PHPStorm 以这种方式工作。

嗯......据我了解，css 代码没有错误，但 sass 有。在这种情况下，您唯一可以尝试的是将 css 文件夹标记为 resource root（在项目视图中右键单击它并从那里开始）。

在我们的项目中，我们确实拥有与 css 相同级别的 sass。但是我们有 sass/components，最终会遇到同样的问题。所以，一个解决方案会很好:)

不是答案，但解决方法是打开错误菜单（将光标放在其中并按“alt”+“enter”（mac））并导航到“创建目录资产” ->“编辑检查配置文件设置”，然后修改突出显示的检查设置。要么完全禁用它，要么改变严重性

【参考方案1】：

替换：

background: url(../images/foobar.png);

与：

background: image-url('foobar.png');

使用指南针 image-url() 函数。 PHPStorm 的检测错误会消失，compass 会根据图片资源根目录自动生成正确的路径。