sass - scss : compass, gruntjs 和 bower 安装基础 - 导入路径

Question

所以我有以下由 yeoman 创建的目录结构。

calvin % tree -L 2
.
├── Gruntfile.js
├── app
│   ├── 404.html
│   ├── bower_components
|   |      └── foundation
│   ├── favicon.ico
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   ├── styles
|   |      ├── main.css
|   |      └── main.scss     
│   └── views
├── bower.json
├── karma-e2e.conf.js
├── karma.conf.js
├── node_modules
│   ├── connect-livereload
│   ├── grunt
│   ├── grunt-concurrent
│   ├── grunt-contrib-clean
│   ├── grunt-contrib-coffee
│   ├── grunt-contrib-compass
│   ├── grunt-contrib-concat
│   ├── grunt-contrib-connect
│   ├── grunt-contrib-copy
│   ├── grunt-contrib-cssmin
│   ├── grunt-contrib-htmlmin
│   ├── grunt-contrib-imagemin
│   ├── grunt-contrib-jshint
│   ├── grunt-contrib-uglify
│   ├── grunt-contrib-watch
│   ├── grunt-google-cdn
│   ├── grunt-karma
│   ├── grunt-ngmin
│   ├── grunt-open
│   ├── grunt-rev
│   ├── grunt-usemin
│   └── matchdep
├── package.json
└── test
    ├── runner.html
    └── spec

在我的 styles 目录中，我有一个 main.scss 文件，它由 compass 监视，在 Gruntjs 中配置。

在我通过 bower install foundation 安装基础之后，我的基础文件被下载到 bower_components 目录中，如何在 main 中导入我的基础类.scss ?

这似乎行不通

@import "foundation";

Answer 1

我假设您使用的是 grunt-contrib-compass并将指南针作为繁重的任务运行。

对于 Foundation 5，以下内容不起作用

• 需要“基础”(或“zurb-foundation”)
• 使用 importPath 选项指定位置

解决方法是我在 migration page 上偶然发现的,即通过config:config.rb指定一个外部配置文件。在该配置文件中，指定导入路径:

add_import_path "bower_components/foundation/scss"

然后当你调用 grunt compass 时它会编译正常