使用bower在Scss文件中依赖scss

Question

我正在为我自己的项目开发一个类似于引导的scss框架。

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

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

从其他保龄球包中包含依赖的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 "../compass-breakpoint/stylesheets/breakpoint";

问题是，我使用bower link来引用包的开发版本(阅读更多关于bower link 这里的内容)。通常情况下，这是正确的路径。

带着弓形链。这导致在包含@import '../etc/etc‘时路径出错。因为这个包只是被符号连接在。

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

示例：

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

其结果是，现在的加载路径之一是：

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

这是完美的工作，无论是链接保龄球包和正常安装的。:)