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

所以我有以下由yeoman创建的目录结构。scss：指南针，gruntjs和bower安装基础 - 导入路径

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";

来源

2013-07-05 Calvin Cheng

读了起来，@安德烈的完整的解决方案后，实际上是阐述在这里 - 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-05 03:35:43

不要通过鲍尔安装基金会。 Bower用于提取资产，但Foundation是Compass扩展应该直接通过Compass使用。

要使@import "foundation";正常工作，您必须将require 'foundation'添加到您的Compass配置文件中，并通过gem install zurb-foundation安装Foundation。

来源

2013-07-05 05:10:25

好尖！谢谢！ –

不是（已经）：“有了Foundation 4，我们已经从框架中删除了所有的依赖关系。这意味着您可以单独使用Foundation和Sass，并添加指南针，波旁或其他任何东西。“ - [Zurb网站]（http://foundation.zurb.com/docs/sass.html）。 – Adam

我假设你正在使用grunt-contrib-compass并且运行指南针作为一个咕task任务。

随着基金会5，下列不工作

require 'foundation'（或 'zurb基金会'）
使用importPath选项来指定位置

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

add_import_path "bower_components/foundation/scss"

然后当你调用grunt compass它将编译罚款

来源

2013-12-14 00:01:53 rolfk

add_import_path“bower_components/foundation/scss” 为我工作！谢谢。 – jredd

我会建议使用它为我工作的“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 /基础/ SCSS /基础/组件/手风琴

来源

2014-03-13 17:06:43 omarjebari

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

回答

相关问题