Question

所以我有自己创建的以下目录结构。

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

在我的样式目录中，我有一个main.scss文件，由指南针监视，在Gruntjs中配置。

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

这似乎不起作用

@import "foundation";

Answer 1

我假设您正在使用grunt-contrib-compass并将罗盘作为一项艰巨的任务。

使用Foundation 5，以下内容不起作用

require 'foundation'（或'zurb-foundation'）
使用importPath选项指定位置

解决方法是我在migration page巧合发现的，这是通过config: config.rb指定外部配置文件。在该配置文件中，指定导入路径：

add_import_path "bower_components/foundation/scss"

然后当你打电话给grunt compass时，它会编译好

Answer 2

在阅读了更多内容后，@ Andrey的完整解决方案实际上已在这里详细阐述 - http://ericdfields.com/post/installing-compass-frameworks-in-a-yeoman-project

它需要一些更新，所以我写了一篇关于它的文章，详细介绍了如何@import 'foundation'。在这里 - http://calvinx.com/2013/07/11/zurb-foundation-via-gem-with-yeoman-gruntfilejs/

Answer 3

我建议使用适合我的'importPath'选项。

我的Gruntfile.js有这样的配置......

grunt.initConfig({
    sass: {
      dev: {
        options: {
          style: 'expanded',
          loadPath: 'bower_components/foundation/scss'
        },
        files: {
          'public/static/css/main.css': 'app/frontend/scss/foundation.scss'
        }
      },

注意loadPath选项指向我的基础组件的位置。在我的foundation.scss文件中，导入类似于：

@import "foundation/components/accordion"

所以路径被解析为：bower_components / foundation / scss / foundation / components / accordion

Answer 4

不要通过Bower安装Foundation。 Bower用于获取资产，但Foundation是Compass扩展，应该通过Compass直接使用。

要使@import "foundation";生效，您必须将require 'foundation'添加到Compass配置文件中，然后通过gem install zurb-foundation安装Foundation。

scss：指南针，gruntjs和bower安装基础 - 导入路径

4 个答案: