Foundation 使用 PyCharm 编译 sass答案

【问题标题】：Foundation compiling sass using PyCharmFoundation 使用 PyCharm 编译 sass
【发布时间】：2018-03-11 05:48:42
【问题描述】：

我正在试验 Foundation 站点，使用 PyCharm 编译 sass。

创建了一个名为foundation的文件夹，我已经按照站点说明安装了文件

cd foundation
npm install foundation-sites --save

我在项目的根目录（与基础文件夹相同的级别）创建了一个名为 sass-test 的文件夹，其中我有一个名为 custom.scss 的文件，在顶部我有：

@import "../foundation/node_modules/foundation-sites/scss/settings";
@import "../foundation/node_modules/foundation-sites/scss/foundation";

路径正确。

下面我刚刚输入了一些简单的东西来测试编译例如

body {
  background:red;
}

在 PyCharm 中设置了我的文件观察器后，代码确实会编译到 sass-test 文件夹，但编译后的 css 仅包含正文规则。没有一个css是从settings.scss或foundation.scss编译的

根本没用过sass，谁能告诉我这里哪里出错了？

非常感谢！

【问题讨论】：

标签： sass zurb-foundation

【解决方案1】：

尝试加载 util 目录。 E.G

@import '../node_modules/foundation-sites/scss/util/util';     
@import '../node_modules/foundation-sites/scss/foundation.scss';  

// Settings  
@include foundation-global-styles;  
@include foundation-grid;  
@include foundation-typography;  
@include foundation-forms;  `

等等等等。

我以这种方式加载了所有设置，因为我不需要使用下来的所有内容，但是如果您想要全部内容，您大概可以以相同的方式包含部分设置。我认为主要是对我而言，问题不在于加载实用程序。

这就是我如何让我的框架部分从 node_modules 编译，虽然没有使用 Pycharm 的经验。

希望这会有所帮助！

【讨论】：

如果您不想使用 gulp 或 bower 有点痛苦，我会找到 Foundation 的文档 - 花了很长时间弄清楚我做错了什么，很高兴能够通过一起来！
你是对的——它们不好——你的帮助节省了很多时间！当您使用foundation-cli 时，您将获得此处所描述的设置（我以前使用过），但是您知道当您使用上面显示的npm 时等价物在哪里吗？还有，找不到motion ui？
@Newfoundland 我无法回答关于 motion-ui 的问题 - 我的印象是它是一个独立的库，它确实在 foundation docs 中说它包含在启动项目中，对我来说没什么好处，因为我只想要这个框架。至于设置，我将所有导入语句复制到我自己的部分框架中，并删除我知道我不会使用的任何内容。我删除了关于使用哪个网格的 if 语句 (@mixin foundation-everything)。