2

所以我有以下由 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

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

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

这似乎不起作用

@import "foundation";
4

4 回答 4

4

我假设您正在使用grunt-contrib-compass并将 compass 作为 grunt 任务运行。

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

  • require 'foundation'（或“zurb 基础”）
  • 使用importPath选项指定位置

解决方法是我在迁移页面上偶然发现的，就是通过config: config.rb. 在该配置文件中，指定导入路径：

add_import_path "bower_components/foundation/scss"

然后当你调用grunt compass它会编译好

于 2013-12-14T00:01:53.830 回答
1

我建议使用对我有用的“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

于 2014-03-13T17:06:43.907 回答
1

阅读更多内容后，@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/

于 2013-07-05T03:35:43.820 回答
0

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

为了@import "foundation";工作，您必须添加require 'foundation'到您的 Compass 配置文件并通过gem install zurb-foundation.

于 2013-07-05T05:10:25.997 回答