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

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

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

这似乎不起作用

@import "foundation";

Answer 1

我假设您正在使用 grunt-contrib-compass 并将 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。