文章/答案/技术大牛

发布

社区首页 >问答首页 >scss: compass、gruntjs和bower安装基础-导入路径

问scss: compass、gruntjs和bower安装基础-导入路径
EN

Stack Overflow用户

提问于 2013-07-05 10:55:04

回答 4查看 9.2K关注 0票数 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

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

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

这似乎不管用

@import "foundation";

sass

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-07-05 11:35:44

在阅读了更多之后，@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/

票数 1

Stack Overflow用户

发布于 2013-12-14 08:01:54

我假设您正在使用grunt-contrib-compass并将compass作为一项繁重的任务来运行。

在Foundation 5中，以下内容不起作用

require 'foundation' (或'zurb-foundation')
using importPath选项以指定

的位置

我偶然在migration page上找到了解决方法，即通过config: config.rb指定外部配置文件。在配置文件中，指定导入路径：

add_import_path "bower_components/foundation/scss"

然后，当您调用grunt compass时，它将编译得很好

票数 4

Stack Overflow用户

发布于 2014-03-14 01:06:44

我会推荐使用'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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17480443

复制

相似问题

问scss: compass、gruntjs和bower安装基础-导入路径
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问scss: compass、gruntjs和bower安装基础-导入路径EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问scss: compass、gruntjs和bower安装基础-导入路径
EN