使用 bower 的 scss 文件中的 Scss 依赖项

Question

我正在为自己的项目开发类似于 bootstrap 的 scss 框架。

这个项目是一个注册的 bower 包。在我的 scss 文件中，我依赖于另一个 bower 包，我需要 @import 在我的其他 scss 文件中。

看来仅仅在bower.json文件中声明依赖是不够的。

从其他 bower 包中包含依赖的 scss 文件的正确方法是什么？

这是我的 bower.json 文件：

{
  "name": "pre-cortex",
  "version": "0.0.5",
  "authors": [
    "Ole Henrik Skogstrøm"
  ],
  "description": "a scss framework",
  "main": "pre-cortex.scss",
  "keywords": [
    "pre-cortex",
    "cortex"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "compass-breakpoint": "~2.5.0"
  }
}

这是我的主文件：

// This first line is not correct. This does not work when the package is installed in other projects. 
@import "bower_components/compass-breakpoint/stylesheets/breakpoint";

@import "components/css-reset";
@import "components/form-reset-helpers";
@import "components/variables";
@import "components/typografi";
@import "components/grid";
@import "components/helpers";
@import "components/nav-horizontal";
@import "components/nav-vertical";
@import "components/jumbotron";
@import "components/well";
@import "components/form";
@import "components/button";

Answer 1

我根据@BassJobsen 的评论找到了解决方案。

在您尝试包含到项目中的 bower 包中使用正常的 @import 路径。例如：

@import "../compass-breakpoint/stylesheets/breakpoint";

问题是我使用 bower link 来引用我的包的开发版本（阅读更多关于 bower link here）。通常这是正确的路径。

带凉亭link。这导致在包含 @import '../etc/etc' 时路径错误。因为包只是 symlinked in.

要解决这个问题，只需向编译器添加一个额外的加载路径。我正在使用 gulp 所以对我来说我将这一行添加到我的 styles.js 文件中：loadPath: ["bower_components/angular"]

示例：

var sassOptions = {
  style: 'expanded',
  loadPath: ["bower_components/angular"]
};

结果是其中一个加载路径现在是：

bower_components/angular/../compass-breakpoint/stylesheets/breakpoint

这对于 linked bower 包和正常安装的包来说都很完美。 :)

使用 bower 的 scss 文件中的 Scss 依赖项

Scss dependency inside scss file using bower

dependencies

sass

bower