Question

我为自己的项目开发了一个类似于bootstrap的scss框架。

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

似乎只是在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）。通常这是正确的路径。

使用凉亭链接。当包含@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

对于链接的凉亭包和正常安装的包，它都能很好地工作。：）

使用bower

1 个答案: