与SASS一起建立基础5项目

时间:2020-12-08 23:56:33

I'm pretty new to the whole world of Compass and SASS, so I might be missing something fundamental here. I'm running into a structuring problem with Foundation 5.

我对指南针和萨斯的世界很陌生,所以我可能漏掉了一些基本的东西。我在Foundation 5遇到了一个结构问题。

How does one get this all to work neatly within an existing (git) project? When I run foundation new myproject, it clones the basics into 'myproject': a bower_components/ folder for the dependencies, a config.rb in the root, an 'scss' folder where I can modify the SASS files with compass watch running in the background to generate my CSS files, and an example index.html file. On its own, I think I get how it all works.

如何在一个现有的(git)项目中使所有这些都能正常工作?当我运行foundation new myproject时,它将基础复制到“myproject”中:一个用于依赖项的bower_components/文件夹,一个配置。根目录中的rb是一个“scss”文件夹,我可以在其中修改SASS文件,并在后台运行compass watch,以生成CSS文件和示例索引。html文件。我想我自己就知道它是怎么运作的。

I have an existing project in which I intend to use Foundation 5. My first instinct was to try to "initialize" Foundation in the root of my project: foundation new . Since it's using git, of course it complained the dir wasn't empty. Fair enough, so I made it a sub-folder within my public_html: foundation new foundation. I placed config.rb in the root of my project and updated the paths, so I can just run compass watch from my root. All this worked pretty neatly, I played around with the scss files and watched my css file get updated accordingly. Then I committed the result and pulled it from a different location. 'foundation', being a repo inside of a repo, didn't get committed along with everything else. Most of the stuff inside there doesn't matter - foundation new whatever loads it all up again, and .gitignoring /bower_components is sensible. But the custom code inside the 'scss' directory I do need. I tried setting up my project in a different way, having the 'scss' dir outside of the bower directory, and setting it as the sass_dir in config.rb. That setup makes sense to me, but I can't get it to work: running compass watch fails:

我有一个现有的项目,我打算使用Foundation 5。我的第一反应是尝试在我的项目的基础上“初始化”基础:Foundation new。由于它使用的是git,所以它当然抱怨dir不是空的。很好,所以我将它设置为public_html: foundation new foundation中的子文件夹。我把配置。在我的项目的根目录中建立rb并更新路径,这样我就可以从根目录中运行compass watch了。所有这些都运行得很好,我摆弄了一下scss文件,看着css文件相应地更新。然后我提交了结果,并将其从不同的位置提取出来。“foundation”是“repo”内部的“repo”,与其他一切都没有关系。里面的大部分内容都无关紧要——不管什么东西重新加载它,.gitignoring /bower_components都是合理的。但我确实需要“scss”目录中的自定义代码。我尝试用另一种方式设置我的项目,将“scss”dir放在bower目录之外,并将其设置为config.rb中的sass_dir。这个设置对我来说是有意义的,但是我不能让它工作:运行指南针手表失败:

     File to import not found or unreadable: foundation.

My config.rb right now:

我的配置。rb:

    http_path = "/"
    css_dir = "public_html/assets/css"
    sass_dir = "foundation/scss"
    images_dir = "public_html/assets/img"
    javascripts_dir = "public_html/assets/js"

How do I tell it explicitly where foundation is? I've tried playing around with 'add_import_path' in config.rb, but that didn't do much.

如何明确地告诉它foundation在哪里?我尝试过在配置中使用“add_import_path”。rb,但这没什么用。

I have the feeling I'm missing something fundamental here, or maybe I'm overthinking it. Google isn't helping much since Foundation 5 is pretty much fresh out of the oven. Can somebody give me a push in the right direction?

我觉得我错过了一些基本的东西,或者我想得太多了。谷歌并没有多大帮助,因为5号粉底刚刚出炉。谁能帮我往正确的方向推一下吗?

Thanks!

谢谢!

2 个解决方案

#1


4  

I had a similar problem, I ended up downloading foundation-compass-template instead of using the foundation command line

我遇到了类似的问题,最后我下载了foundation-compass-template而不是使用foundation命令行

Unzipping it into the root of my project and then

将它解压缩到项目的根中,然后

bower install

Here is the config.rb that came along with it:

这是配置。随之而来的rb:

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

I know it's not a direct answer but hopefully that project gives you a some direction

我知道这不是一个直接的答案,但希望这个项目能给你一个方向

Hope this helps

希望这有助于

#2


2  

The accepted answer turned out to be part of the solution. It worked, and looking at the config.rb again I realized the right way to tell Compass where to look for Foundation. D'oh.

公认的答案是解决方案的一部分。它工作了,查看配置。我再次意识到正确的方法告诉指南针在哪里寻找基础。分析。

My structure is now as follows:

我的结构如下:

config.rb
public_html/
--assets/
----scss/
----css/
----foundation/
------bower_components/
--------foundation/ 
----------scss/ # this is the dir that needed to be imported from config.rb

Config.rb:

Config.rb:

add_import_path "public_html/assets/foundation/bower_components/foundation/scss" # *magic*
http_path = "/"
css_dir = "public_html/assets/css"
sass_dir = "public_html/assets/scss"
images_dir = "public_html/assets/img"
javascripts_dir = "public_html/assets/foundation/js"

As you can see, this way things are exactly like what I was hoping to get: Foundation's stuff inside of public_html/assets/foundation - don't need to touch that directory for anything except running bower update from time to time - and my custom scss resides in public_html/assets/scss.

正如您所看到的,这种方式与我希望得到的完全一样:Foundation的东西在public_html/assets/ Foundation中—除了不时地运行bower update之外,不需要触及该目录—我的自定义scss位于public_html/assets/scss中。

Thanks for giving me that much-needed push!

谢谢你给了我必要的推动力!

#1


4  

I had a similar problem, I ended up downloading foundation-compass-template instead of using the foundation command line

我遇到了类似的问题,最后我下载了foundation-compass-template而不是使用foundation命令行

Unzipping it into the root of my project and then

将它解压缩到项目的根中,然后

bower install

Here is the config.rb that came along with it:

这是配置。随之而来的rb:

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

I know it's not a direct answer but hopefully that project gives you a some direction

我知道这不是一个直接的答案,但希望这个项目能给你一个方向

Hope this helps

希望这有助于

#2


2  

The accepted answer turned out to be part of the solution. It worked, and looking at the config.rb again I realized the right way to tell Compass where to look for Foundation. D'oh.

公认的答案是解决方案的一部分。它工作了,查看配置。我再次意识到正确的方法告诉指南针在哪里寻找基础。分析。

My structure is now as follows:

我的结构如下:

config.rb
public_html/
--assets/
----scss/
----css/
----foundation/
------bower_components/
--------foundation/ 
----------scss/ # this is the dir that needed to be imported from config.rb

Config.rb:

Config.rb:

add_import_path "public_html/assets/foundation/bower_components/foundation/scss" # *magic*
http_path = "/"
css_dir = "public_html/assets/css"
sass_dir = "public_html/assets/scss"
images_dir = "public_html/assets/img"
javascripts_dir = "public_html/assets/foundation/js"

As you can see, this way things are exactly like what I was hoping to get: Foundation's stuff inside of public_html/assets/foundation - don't need to touch that directory for anything except running bower update from time to time - and my custom scss resides in public_html/assets/scss.

正如您所看到的,这种方式与我希望得到的完全一样:Foundation的东西在public_html/assets/ Foundation中—除了不时地运行bower update之外,不需要触及该目录—我的自定义scss位于public_html/assets/scss中。

Thanks for giving me that much-needed push!

谢谢你给了我必要的推动力!