使用Yeoman导入使用Sass的Compass样式

Question

我使用yo webapp创建了一个项目（显然安装了generator-webapp）。 一切都很好，但我仍然缺少一些东西。我确信这是一个如此简单的答案，我永远不会回到原因，因为我会太尴尬。

我想使用Compass，它与Yeoman开箱即用，但我不知道如何。我的意思是，显然@import "compass...etc"内部任何Sass文件都不起作用，因为在app/bower_components内（@import内指定的Sass Gruntfile.js的默认路径）没有{{1} }目录。

我现在应该怎么做才能导入Compass样式表？

Answer 1

您可以像平常一样使用指南针。如果您使用compass create设置了一个vanilla指南针项目，则还有compass个文件夹。如果您想使用指南针附带的任何助手，您可以按照文档中的描述导入它们，例如

@import "compass/css3";

.mybox {
    @include box-shadow(red 2px 2px 10px);
}

main.scss

Answer 2

您必须使用npm install grunt-contrib-compass为指南针安装grunt任务，并调整Gruntfile.js以添加指南针编译任务。

它可能看起来并不那么容易，因为它有一些棘手的部分，例如将你的sass编译为.temp/main.css以用于测试/ livereload，然后在进行最终构建时将其缩小为dist。 / p>

最简单的方法可能是尝试在另一个目录中使用罗盘的另一台发电机。例如，angular生成器具有指南针，甚至是指南针的引导程序。这很酷。