This bundle make it easy to use Sass with Symfony's AssetMapper Component (no Node required!).
- Automatically downloads the correct Sass binary
- Adds a
sass:build
command to build and watch your Sass changes
Install the bundle
composer require symfonycasts/sass-bundle
Start by writing your first Sass file assets/styles/app.scss
, and let's add some basic style
/* assets/styles/app.scss */
$red: #fc030b;
body {
background: $red;
}
Then point your styles in your template.
{# templates/base.html.twig #}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
{% endblock %}
That's right! You point directly to the .scss
file. But don't worry, the final built .css
file will be returned!
Then run the command:
php bin/console sass:build --watch
And that's it!
The first time you run one of the Sass commands, the bundle will download the correct Sass binary for you system in to bin/dart-sass
directory.
When you run sass:build
, that binary is uses to compile Sass file into a
var/sass/app.built.css
file. Finally, when the contents of assets/styles/app.scss is requested, the bundle swaps the contents of that file
with the contents of var/sass/app.built.css
. Nice!
Bootstrap is available as Sass, allowing you to customize the look and feel of your app. An easy way to get the source Sass files is via a Composer package:
composer require twbs/bootstrap-sass
Now, import the core bootstrap.scss
from your app.scss
file:
/* Override some Bootstrap variables */
$red: #FB4040;
@import '../../vendor/twbs/bootstrap/scss/bootstrap';
When you deploy, run sass:build
command before the asset-map:compile
command so the built file is available:
php bin/console sass:build
php bin/console asset-map:compile
When using url()
inside a Sass file, currently, the path must be relative to
the root .scss
file. For example, suppose the root .scss
file is:
/* assets/styles/app.scss */
import 'tools/base';
Assume there is an assets/images/login-bg.png
file that you want to refer
to from base.css
:
/* assets/styles/tools/base.scss */
.splash {
/* This SHOULD work, but doesn't */
background-image: url('../../images/login-bg.png');
/* This DOES work: it's relative to app.scss */
background-image: url('../images/login-bg.png');
}
It should be possible to use url()
with a path relative to the current file.
However, that is not currently possible. See this issue
for more details.
To see the full config from this bundle, run:
php bin/console config:dump symfonycasts_sass
The main option is root_sass
option, which default to assets/styles/app.scss
. This represents the source Sass file.
This bundle already installed for you the right binary. However if you already have a binary installed on your machine
you can instruct the bundle to use that binary, set the binary
option:
symfonycasts_sass:
binary: 'node_modules/.bin/sass'