不同路径sass引用，图片路径会出现问题

[yeesunday]

假设有a、b两个不同路径下的 sass 文件，a 引用 b。以 b.sass 为相对路径引用图片，FIS在编译 a 文件时不能准确找到图片路径。 我做了一个 demo ，可以点来看看https://github.com/yeesunday/fis-sass-demo/tree/master

[fouber]

@yeesunday

已知问题，因为流程上是，sass插件先把sass/scss代码编译成css，然后fis处理css中的路径，这个时候相对位置关系已经发生了变化。

解决方案：

• 方法一：在b中写绝对路径。绝对路径以 / 开头，相对于项目根目录定位资源（fis-conf.js 所在目录）。这样无论在a还是b中都是正确的路径。

• 方法二：让b中的图片地址变成变量或者mixin的参数，由a在import之后调用传参，相对路径就以a为准了。比如：

  // b.scss
  @mixin icon($img) {
    background: url($img);
  }

  // a.scss
  @import "b";
  .foo {
    @include icon(a.png);
  }

• 方法三：借助模块化框架，声明a依赖于b，框架会在需要a的时候先加载b，而不是通过sass的import合并在一起。

其实对于 less/sass/scss/stylus 这类预编译css语言来说，如果有模块化框架，那么其@import只应该用作加载minxin或者变量这些功能性的代码。基本上不会遇到@import一个资源，而那个资源还有自己的图片这种情况。说的可能有点不清楚，我举个例子：

你有a、b两个sass文件，其中，b.sass的内容为：

// b.sass
.icon {
    background: url(foo.png);
}

现在，a.sass想用b.sass的代码，那么直接 @import 就会出现你的前述问题，但这样使用是必要的么？假设b.sass的代码很通用，那么可能会有c.sass、d.sass等等文件需要用到它，那么如果每个文件都@import一下这个文件，那就会导致相同的代码被人为的复制了很多份冗余，这对工程是不利的，在这种情况下，应该考虑的是逻辑复用，就是借助模块化框架来管理依赖关系，这样无论有多少个sass文件引用了b.sass，b.sass的代码只加载一次。

// a.sass
// @require b.sass
.foo {
    color: red;
}

其中 @require b.sass 是fis提供的依赖声明语法，借助模块化框架、fis的map.json，就能实现模块化加载了。

以上阐述的是 “代码复用应该借助模块化框架的依赖管理（@require），而不是编译期的代码内嵌（@import）”。排除掉这种单纯的代码内容复制方式，你会发现，sass等预编译语言的 @import 在工程中只应该被用作mixin、变量定义等场景。mixin属于编译层面的逻辑复用，但也有内容复制的嫌疑，最终的编译结果有时候也会有一些冗余，应该合理利用css的层叠能力。

[CodeDreamfy]

感谢解疑，在vue中使用scss中也碰到了类似的问题，使用了第二种方法解决了。