README

配置包

composer.json

require: {
    "javihgil/sass-bridge-bundle": "~1.0"
}

Assetic SassRewrite过滤器配置

app/config/config.yml

# Assetic Configuration
assetic:
    ...
    filters:
        sassrewrite:
            resource: %kernel.root_dir%/../src/Jhg/SassBridgeBundle/Resources/config/assetic/sassrewrite.xml
            apply_to: "\.(scss)$"
        ...

需要根据安装目录指向过滤器的XML文件中的resource。

用法

/* src/....Bundle/Resources/assets/styles/sample.scss */

@import '@OtherBundleBundle/Resources/assets/styles/other-sample.scss';

div#id {
	background-image: url('@OtherBundleBundle/Resources/public/images/sample.png');
}

配置Sass

Ubuntu安装

$ sudo apt-get install ruby
$ sudo gem install sass
$ sudo gem install compass

Symfony配置

config/parameters.yml

assetic_ruby_bin: /usr/bin/ruby
assetic_compass_bin: /usr/local/bin/compass
assetic_sass_bin: /usr/local/bin/sass

config/config.yml assetic: .... ruby: "%assetic_ruby_bin%" filters: sass: bin: "%assetic_compass_bin%" compass: bin: "%assetic_compass_bin%"

Bootstrap Sass

composer.json

"require": {
    "twbs/bootstrap-sass": "dev-master"
},

app/config/config.yml

jhg_sass_bridge:
    resources_paths:
        bootstrap: "../vendor/twbs/bootstrap-sass/vendor/assets/stylesheets/bootstrap"

用法

@import '@boostrap/variables';

配置开发缓存

Assetic只会在文件被修改时监视，如果任何导入被修改则不会。

在开发过程中，我们希望快速测试任何更改，因此我们需要禁用Assetic缓存。

app/config/config_dev.yml

parameters:
    # overrides assetic cache on development for disable scss caching
    assetic.cache.class: Jhg\SassBridgeBundle\Assetic\Cache\FilesystemDevDisableCache