Question

我有sass文件样式/ app.scss，内容如下：

@import '../scripts/jspm_packages/npm/font-awesome@4.6.1/scss/font-awesome';
@import '../scripts/jspm_packages/npm/jquery-ui@1.10.5/themes/base/jquery-ui.css';

@import 'components/base';
@import 'components/cart';
@import 'components/category';
@import 'components/dialog';
@import 'components/form';

我想用'../scripts/jspm_packages/npm/font-awesome@4.6.1/scss/font-awesome'和'../scripts/jspm_packages/npm/jquery-生成app.css边界文件包含ui@1.10.5/themes/base/jquery-ui.css，这不是问题，但是我希望这个文件中的url相对于这个文件路径以及dist目录的一些路径进行重新定位，其中app.css将被放置。

font-awesome.sass包含字体路径，如url（'../ fonts / somefont.ttf'）以及jquery-ui.css。所以我们在导入的文件中有相对导入和相对URL。

所以，如果我有：

dist/
  styles/
    app.css
  fonts/
    'here I want to place all awesome fonts'
  images/
    'here I want to place all images'

我想在app.css中获取路径，如url（'../ fonts / somefont.ttf'）等等。

我尝试了很多gulp插件，但他们没有在导入的文件中重新设置相对url。

可能你可以帮助我。如何实现这一点，或者我可能需要在项目中更改某些内容以使其按预期工作。

谢谢！

Answer 1

我今天发布了一个npm包，它可以满足您的需求：css-source-map-rebase

我在经过多次试验和错误后发现，将CSS中的资产相对于导入文件的唯一可靠方法是使用其源映射。如果您考虑它是有道理的：源映射的目的实际上是维护生成的文件（CSS）中的行/列对与源文件（SASS，LESS）中的行/列对之间的映射。一旦你理解了这一点，编写一个模块将资产相对于引用它们的源文件进行重新定位是非常简单的。

我写的npm包基本上是一个节点流，它将源映射作为参数，使用CSS文件并返回一些带有资产重新定位的CSS。

以下来源......

entry.scss

@import "partial/bar.scss";

.foo {
    background: url('./foo.png');
}

部分/ bar.scss

.bar {
    background: url('./bar.png');
}

......生成的CSS将是：

.bar {
    background: url('partial/bar.png');
}

.foo {
    background: url('foo.png');
}

如果你需要帮助，请不要犹豫再回到我的身边。通过在GitHub存储库上打开问题或在此处询问。

编辑：我刚刚发现存储库URL在npm中很糟糕。这是：https://github.com/ericmorand/css-source-map-rebase。我会在几分钟内解决。

关于他们的相对进口的相对css网址

1 个答案: