Question

我正在将引导类隔离到一个顶级类中，以避免与我自己的页面的CSS发生冲突，正如this post中的Chris Youderian指出的那样。我使用以下bootstrap-custom.less文件：

.bootstrap-custom {
  @import (less) '../libs/bootstrap/css/bootstrap.css';
}

问题在于，当我使用glyphicons时，它会查找相对于bootstrap-custom.less路径的字体，而不是bootstrap.css所在的路径。

我不想将bootstrap-custom.less放在bootstrap的文件夹中，因为它是由bower管理的依赖项，看起来不对。

有没有办法在不修改bootstrap代码的情况下解决它？同样，我不想这样做，因为它是由包管理器管理的依赖项。

Answer 1

我刚刚解决了我的问题。

我只需重新声明我font-family内bootstrap-custom.less相对于自身的内容，如下所示：

.bootstrap-custom {
    @import (less) '../libs/bootstrap/css/bootstrap.css';

    @font-face {
      font-family: 'Glyphicons Halflings';

      src: url('../libs/bootstrap/fonts/glyphicons-halflings-regular.eot');
      src: url('../libs/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
           url('../libs/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
           url('../libs/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'),
           url('../libs/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
           url('../libs/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }
}

我现在会使用它，但也许有人想出一个更好的解决方案。

少包括路径

1 个答案: