Symfony Sass Bundle

https://symfony.com/bundles/SassBundle/current/
Admin
Symfony Sass Bundle integrates Sass compilation with Symfony's AssetMapper component, automatically...
Tokens:2,096
Snippets:34
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Bootswatch Sass via Composer

Source: https://symfony.com/bundles/SassBundle/current/index.html

Use Composer to install the Bootswatch Sass package.

```bash
$ composer require thomaspark/bootswatch
```

--------------------------------

### Basic Sass File Example

Source: https://symfony.com/bundles/SassBundle/current/index.html

Define a Sass file with variables and styles. This file will be processed by the bundle.

```scss
/* assets/styles/app.scss */

$red: #fc030b;

body {
  background: $red;
}
```

--------------------------------

### Install SassBundle with Composer

Source: https://symfony.com/bundles/SassBundle/current/index.html

Use Composer to add the SassBundle to your Symfony project.

```bash
$ composer require symfonycasts/sass-bundle
```

--------------------------------

### Install Bootstrap Sass via Composer

Source: https://symfony.com/bundles/SassBundle/current/index.html

Add the Bootstrap Sass package to your project using Composer to easily import its styles.

```bash
$ composer require twbs/bootstrap
```

--------------------------------

### Configure Sass Build Worker for Symfony CLI

Source: https://symfony.com/bundles/SassBundle/current/index.html

Integrate the Sass build command as a worker in your `.symfony.local.yaml` file to automatically start it with `symfony server:start`.

```yaml
# .symfony.local.yaml
workers:
    # ...
    sass:
        cmd: ['symfony', 'console', 'sass:build', '--watch']
```

--------------------------------

### Build Sass and Compile Asset Map

Source: https://symfony.com/bundles/SassBundle/current/index.html

Run the `sass:build` command before `asset-map:compile` during deployment.

```bash
$ php bin/console sass:build
$ php bin/console asset-map:compile
```

--------------------------------

### Dump Sass Bundle Configuration

Source: https://symfony.com/bundles/SassBundle/current/index.html

Use the Symfony console to dump the configuration for the `symfonycasts_sass` bundle.

```bash
$ php bin/console config:dump symfonycasts_sass
```

--------------------------------

### Import Bootstrap in App SCSS

Source: https://symfony.com/bundles/SassBundle/current/index.html

Import the Bootstrap library into your main `app.scss` file. This makes Bootstrap's styles available throughout your application.

```scss
@import 'bootstrap';
```

--------------------------------

### Import Bootswatch and Bootstrap Sass

Source: https://symfony.com/bundles/SassBundle/current/index.html

Import core Bootswatch theme files and Bootstrap's Sass into your main Sass file.

```scss
@import '../../vendor/thomaspark/bootswatch/dist/[theme]/variables';
@import '../../vendor/twbs/bootstrap/scss/bootstrap';
@import '../../vendor/thomaspark/bootswatch/dist/[theme]/bootswatch';
```

--------------------------------

### Build and Watch Sass Changes

Source: https://symfony.com/bundles/SassBundle/current/index.html

Run this command to compile your Sass files and watch for changes during development.

```bash
$ php bin/console sass:build --watch
```

--------------------------------

### Configure Root Sass with Glob Patterns

Source: https://symfony.com/bundles/SassBundle/current/index.html

Use glob patterns within the `root_sass` option to include multiple Sass files from different directories.

```yaml
symfonycasts_sass:
    root_sass:
        - '%kernel.project_dir%/assets/scss/app.scss'
        - '%kernel.project_dir%/assets/lib/*.scss'
        - '%kernel.project_dir%/assets/admin/**/*.scss'
```

--------------------------------

### Specify Sass Binary Path

Source: https://symfony.com/bundles/SassBundle/current/index.html

Manually set the `binary` option to a specific Sass executable path if the bundle fails to detect it automatically.

```yaml
symfonycasts_sass:
    binary: 'node_modules/.bin/sass'
```

--------------------------------

### Configure Root Sass File

Source: https://symfony.com/bundles/SassBundle/current/index.html

Set the `root_sass` option in `config/packages/symfonycasts_sass.yaml` to specify the main source Sass file.

```yaml
# config/packages/symfonycasts_sass.yaml
symfonycasts_sass:
    root_sass: 'assets/styles/app.scss'
```

--------------------------------

### Configure Multiple Root Sass Files

Source: https://symfony.com/bundles/SassBundle/current/index.html

The `root_sass` option supports an array of paths for multiple source Sass files.

```yaml
symfonycasts_sass:
    root_sass:
        - '%kernel.project_dir%/assets/scss/app.scss'
```

--------------------------------

### Configure Sass Load Path

Source: https://symfony.com/bundles/SassBundle/current/index.html

Specify the directory containing Bootstrap's SCSS files in your `config/packages/symfonycasts_sass.yaml` file. This allows the bundle to find and process Bootstrap's Sass.

```yaml
symfonycasts_sass:
    sass_options:
        load_path:
            - '%kernel.project_dir%/vendor/twbs/bootstrap/scss'
```

--------------------------------

### Import Bootstrap Sass in App Sass File

Source: https://symfony.com/bundles/SassBundle/current/index.html

Import Bootstrap's core Sass file into your `app.scss`, after overriding any necessary variables.

```scss
/* Override some Bootstrap variables */
$red: #FB4040;

@import '../../vendor/twbs/bootstrap/scss/bootstrap';
```

--------------------------------

### Configure Sass CLI Options

Source: https://symfony.com/bundles/SassBundle/current/index.html

Set various Dart Sass CLI options within the `sass_options` key in the bundle's configuration.

```yaml
# config/packages/symfonycasts_sass.yaml
symfonycasts_sass:
    sass_options:
        # The output style for the compiled CSS files: expanded or compressed. Defaults to expanded.
        # style: expanded

        # Emit a @charset or BOM for CSS with non-ASCII characters. Defaults to true in Dart Sass.
        # charset: true

        # Register additional load paths. Defaults to empty array.
        # load_path: []

        # Whether to generate source maps. Defaults to true when "kernel.debug" is true.
        # source_map: true

        # Embed source file contents in source maps. Defaults to false.
        # embed_sources:

        # Embed source map contents in CSS. Defaults to false.
        # embed_source_map:

        # Don't print warnings. Defaults to false.
        # quiet:

        # Don't print deprecated warnings for dependencies. Defaults to false.
        # quiet_deps:

        # Don't compile more files once an error is encountered. Defaults to false.
        # stop_on_error:

        # Print full Dart stack traces for exceptions. Defaults to false.
        # trace:
```

--------------------------------

### Register Additional Load Paths for Modules

Source: https://symfony.com/bundles/SassBundle/current/index.html

Use the `load_path` option to provide additional directories for resolving Sass modules, such as Bootstrap's vendor path.

```yaml
symfonycasts_sass:
    sass_options:
        load_path: []
```

--------------------------------

### Sass `url()` Relative Path Limitation

Source: https://symfony.com/bundles/SassBundle/current/index.html

Illustrates the limitation with `url()` paths in Sass files, where paths must be relative to the root `.scss` file, not the current file.

```scss
/* 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');
}
```

--------------------------------

### Exclude Sass Files from AssetMapper

Source: https://symfony.com/bundles/SassBundle/current/index.html

Configure `asset_mapper.yaml` to prevent source Sass files from being copied to the public assets directory during deployment.

```yaml
# config/packages/asset_mapper.yaml
framework:
    asset_mapper:
        paths:
            - assets/
        excluded_patterns:
            - '**/assets/styles/**/_*.scss'
```

--------------------------------

### Link Sass File in Twig Template

Source: https://symfony.com/bundles/SassBundle/current/index.html

Reference the Sass file directly in your Twig template. The bundle handles the compilation to CSS.

```twig
{# templates/base.html.twig #}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
{% endblock %}
```
Tokens:
Raw