Question

我在一个项目中使用Web Essentials 2013，以便在构建/保存时编译更少的css。但是，我在编译时遇到问题，WE正在篡改字体/图像等的相对路径。

例如：

.footer {
    background: url('../img/footer_background.svg') no-repeat top center;
 }

变为：

.footer {
  background: url('img/footer_background.svg') no-repeat top center;
}

我记得以前有过类比问题，但设置＆＃34;调整相对路径＆＃34;在web essentials中使用CSS选项然后修复它。现在似乎没有这样做。我已经尝试了最新的稳定和最新的夜间，两者都有相同的行为。

有什么建议吗？：）

Answer 1

我知道你提到了2013年，但我在2015年遇到了同样的问题，如果我在compilerconfig.json.defaults中设置了"relativeUrls": false，那么上述问题就会停止。作为参考，我使用VS 2015 Pro upd2和Web Compiler扩展v1.11.315。

Answer 2

我也遇到过这种情况。它曾经是早期版本的Web Essentials中的一个问题，但最终得到修复。现在它似乎在2013年重新出现。

我已经看到解决此问题的一种方法是转义url路径，这会导致较少的编译器将值视为字符串文字，它在不触及的情况下按原样传递。

例如： background-image：〜＆＃34; url（＆＃39; ../../../ img / foo.png＆＃39;）＆＃34 ;;

将发出： background-image：url（＆＃39; ../../../ img / foo.png＆＃39;）;

Answer 3

我也使用Web Essentials for LESS，虽然我没有看到它这样做，但我有一个更好的解决方案。而不是在代码中编写路径，特别是如果您要更改的只是最后的文件名，请尝试使用路径变量。例如：

@imgURL: "../img";

然后使用它，您只需要：

.footer{
background: url("@{imgURL}/footer_background.svg");
}

Answer 4

我遇到了与bootstrap相同的问题，它使用字体的相对路径。我认为问题在于node-sass或libsass。

但是，我无法在任一库中找到有关相对路径重写的信息。如果可以修复，那么修复可能会放入新的node-sass版本。

不幸的是，我无法找到系统上安装WebEssentials的地方来测试它。

我刚刚意识到你遇到了LESS编译器的问题，而不是SASS。我想知道这个问题现在是否与CSS minifier有关。

我更改了我的＆＃34;自定义输出目录＆＃34;到＆＃34; ../"这是我想要它写的地方。这导致重写。如果我把它留空，那么相对的路径就不复存在了。

Answer 5

如果有人仍然遇到此问题，请在您的bundleconfig.json中将adjustRelativePaths键添加到缩小选项中，如下所示：

"minify": { "enabled": true, "adjustRelativePaths": false }

此密钥用于BundleHandler静态类here，请查看方法AdjustRelativePaths。

Answer 6

mlhDev的答案很接近，但实际上我必须根据项目的GitHub issue在editorconfig.json文件而不是默认文件中进行更改。我的配置如下：

[
  {
    "outputFile": "StyleSheets/something.css",
    "inputFile": "StyleSheets/scss/something.scss",
    "options": {
        "relativeUrls": false
    }
  }
]

我使用Visual Studio Enterprise 2015作为参考，但应该在其他版本中使用。

Web要点改变编译的css中的相对路径

6 个答案: