PHP Storm：在Symfony 2中设置SCSS

Question

I am new to a Symfony 2 project that contains an SCSS file in the Resources folder: myproject.scss

In the head of the HTML files, the css version of this file gets included:

@MyBundle/Resources/public/css/myproject.css

PHP Storm indicates "Missing asset". The HTML cannot be rendered, Symfony2 says that the asset is missing.

I have never worked with SCSS. How do I achieve that on file change of my scss file the css file gets created/updated and Symfony2 no longer indicates a missing asset for my css path in my HTML file?

What I have done so far in order to solve this problem:

• I installed SASS and Compass via the Ruby gem manager.
• In PHPStorm, I configured a file watcher "SCSS", referencing to C:\Ruby\bin\scss.bat

Answer 1

After installing SCSS compiler and setting the right path in File Watcher settings your css will be generated every time you change your .scss file. This .css file is located by default near original .scss and so to copy it into the web directory you need manually copy it every time or configure your file watcher to do it for you instead.

Also you can configure scssphp assetic filter to do it instead of PhpStorm. It will generate new css file every time you run php app/console assetic:dump command or every time asset is loaded via assetic controller.

To work with Assetic you need next code:

{% stylesheets filter="scssphp" output="css/myproject.css"
        @MyBundle/Resources/myproject.scss
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}