如何在 Windows 下的 Symfony2 中使用 SCSS 过滤器？

Question

其实这是两个问题：

1. 在 Windows 的 Symfony 项目中使用 SCSS 过滤器的正确方法是什么（在 Twig 模板中）？ 我的意思是，我如何在 windows 中使用 scss 二进制文件？

2. 另外，我一定需要使用 Compass 吗？如果我安装了指南针，“如何”使用它？

扩展：这是我做的一些配置：

在 app/config/config.yml

assetic:
debug:          %kernel.debug%
use_controller: false
filters:
    scss:
        bin: "%kernel.root_dir%/Resources/libs/scss"
    compass:
        bin: "%kernel.root_dir%/Resources/libs/compass" 

---

在我的树枝文件中：

{% stylesheets 
      '@PlaylyfeBaseBundle/Resources/public/css/base.scss'
      '@PlaylyfeBaseBundle/Resources/public/css/another.scss'
   filter='scss'
   output='css/compiled/total.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

---

但是，当我加载页面时，我收到以下错误（在 css 文件中）

[exception] 500 | Internal Server Error | RuntimeException
[message] The filename, directory name, or volume label syntax is incorrect.

[1] RuntimeException: The filename, directory name, or volume label syntax is incorrect.
at n/a
in C:\wamp\www\Symfony\vendor\assetic\src\Assetic\Filter\Sass\SassFilter.php line 162

at Assetic\Filter\Sass\SassFilter->filterLoad(object(Assetic\Asset\FileAsset))
in C:\wamp\www\Symfony\vendor\assetic\src\Assetic\Filter\FilterCollection.php line 62

at Assetic\Filter\FilterCollection->filterLoad(object(Assetic\Asset\FileAsset))
in C:\wamp\www\Symfony\vendor\assetic\src\Assetic\Asset\BaseAsset.php line 83

at Assetic\Asset\BaseAsset->doLoad(&#039

Answer 1

我只能代表 Compass，因为我使用的是 Compass，但同样的问题/问题很可能也与 SASS/SCSS 过滤器有关。

在 Windows 系统上 Compass 存在许多已知的文件路径问题：

• 问题 #748：File Path normalization to support Windows systems
• 拉取请求#554：Fixes a bug on Windows systems
• Comments on commit 539f206

...并且还向 Assetic 提出了修复建议以处理它们：

• 拉取请求#154：Compass problem on Windows, ruby.exe not found
• 拉取请求#152：Until Compass issue 554 is not corrected
• 问题 #131：You must compile individual stylesheets from the project directory.

我发现执行以下操作对于使所有内容协同工作是必要的...

#1。确保 %ruby%\bin 在您的环境中 PATH 变量：

示例： PATH = "...;C:\Ruby\1.9.2\bin"

#2。编辑 %ruby%\bin\compass.bat 以使用绝对路径：

@ECHO OFF
IF NOT "%~f0" == "~f0" GOTO :WinNT
@"C:\Ruby\1.9.2\bin\ruby.exe" "C:/Ruby/1.9.2/bin/compass" %1 %2 %3 %4 %5 %6 %7 %8 %9
GOTO :EOF
:WinNT
@"C:\Ruby\1.9.2\bin\ruby.exe" "%~dpn0" %*

#3。在compiler.rb@ line ~10 中手动还原 539f206：

注意：在最新的 Ruby/Compass 版本上可能不需要此步骤。 (Reference)

路径：%ruby%\lib\ruby\gems\1.9.1\gems\compass-*\lib\compass\compiler.rb

#      self.from, self.to = from.gsub('./', ''), to
      self.from, self.to = File.expand_path(from), to

#4。确保 Assetic 配置正确：

示例 (config.yml)：

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        compass:
            bin: %compass.bin%
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar

我在我的参数文件中使用%compass.bin%，以便我可以轻松地在 Windows 和 *nix 系统之间转换代码库，所以我的parameters.yml 看起来像这样：

# Assetic
compass.bin: C:\Ruby\1.9.2\bin\compass.bat

#5。 （可选）升级 Assetic 和 AsseticBundle：

我在deps 文件中将 Assetic 和 AsseticBundle 标记为与 Symfony 2.0.x 一起使用的最后一个可能的提交：

[assetic]
    git=http://github.com/kriswallsmith/assetic.git
    version=ac71449e46bed22c276da26bf54ab2f733b3801d

[AsseticBundle]
    git=http://github.com/symfony/AsseticBundle.git
    target=bundles/Symfony/Bundle/AsseticBundle
    version=da4a46ce37557dcf3068b8493b12bdbbe47455e2

确保将上面所有路径中的 %ruby% 替换为您到 ruby.exe 的实际路径，我的是 C:\Ruby\1.9.2。

第 2 步和第 4 步可能需要也可能不需要，但在我与这个问题作斗争的过程中，这是我最终的结果，我的设置工作正常（这就是我所关心的！）。

祝你好运！

---

附带问题：您的 SCSS/Compass 二进制文件路径真的在 %kernel.root_dir%/Resources/libs 中吗？

Answer 2

1. 不幸的是，twig scss 扩展在 Windows 上被破坏了。这是一个已知问题。我花了一些时间试图想出一个解决方法，但没有可用。我发现最好只使用带有 --watch 参数的 scss 可执行文件来简单地创建 css 文件并将它们存储在 Resource/public 目录中。这也可以简化一些部署问题，因为您无需担心服务器上有 scss。

2. scss 不需要使用指南针。把它想象成一个有用的 CSS 库。例如，如果你有做 css 圆边的冲动，Compass mixin 将生成所有供应商特定的自定义标签。有关使用它的详细信息，请参阅文档。

Answer 3

就我而言，经过数小时的搜索和尝试许多解决方案，这对我有用：

在 'app/config/config.yml' 中添加：

parameters:
# Assetic
assetic.filter.compass.bin: D:/Ruby193/bin/compass

D:/Ruby193/bin/compass 将取决于您的 Ruby 路径。

看截图： http://s23.postimg.org/3n2oc5wh7/MY_SOLUTION_THAT_I_FOUND.jpg

我的系统： Windows 7旗舰版， 红宝石 1.9.3, Symfony 2.4.3