Use Dart Sass with Sprockets and the Ruby on Rails asset pipeline.
This gem is a fork of sass/sassc-rails which maintains API compatibility but delegates to the sass-embedded gem which uses Dart Sass instead of the libsass C implmentation.
For ease of upgrading, the root namespace ::SassC is still used by this gem,
although it is now a misnomer. This is planned to be renamed in a future
major version release.
Add this line to your application's Gemfile:
gem 'dartsass-sprockets'This will automatically configure your default Rails
config.assets.css_compressor to use :sass.
The current version of dartsass-sprockets supports:
- Ruby 3.1+
- Rails 6.1+
For older versions of Ruby and Rails may be supported with earlier versions of this gem.
This gem uses a Railtie to automatically set the following configuration in all environments except Development:
# set automatically by this gem
config.assets.css_compressor = :sassThis causes Sprockets to minify all CSS assets (both Sass and plain CSS) using Dart Sass.
This minification is done as a second-pass after compiling the Sass to CSS,
and is done irrespective of whether the config.sass.style option is set to :compressed.
To disable this behavior, set config.assets.css_compressor = false.
To turn on inline source maps, add the following configuration
to your config/environments/development.rb file:
# in config/environments/development.rb
config.sass.inline_source_maps = trueNote these source maps appended inline to the compiled application.css file.
(This option will not generate additional files.)
To silence common deprecation warnings, add the following configuration. Refer to details in the below section.
# in config/application.rb
config.sass.quiet_deps = true
config.sass.silence_deprecations = ['import']The following options are exposed via Rails.application.config.sass.{option}.
Options denoted with * are handed by the sass-embedded gem and passed into Dart Sass;
refer to the sass-embedded documentation
and the Dart Sass documentation.
| Option | Type | Description |
|---|---|---|
load_paths |
Array<String> |
Additional paths to look for imported files. |
inline_source_maps |
Boolean |
If true, will append source maps inline to the generated CSS file. Refer to section below. |
style* |
Symbol |
:expanded (default) or :compressed. Overridden by Rails.config.assets.css_compressor; see "CSS Minification" above. |
charset* |
Boolean |
Whether to include a @charset declaration or byte-order mark in the CSS output (default true). |
logger* |
Object |
An object to use to handle warnings and/or debug messages from Sass. |
alert_ascii* |
Boolean |
If true, Dart Sass will exclusively use ASCII characters in its error and warning messages (default false). |
alert_color* |
Boolean |
If true, Dart Sass will use ANSI color escape codes in its error and warning messages (default false). |
verbose* |
Boolean |
By default (false) Dart Sass logs up to five occurrences of each deprecation warning. Setting to true removes this limit. |
quiet_deps* |
Boolean |
If true, Dart Sass won’t print warnings that are caused by dependencies (default false). |
silence_deprecations* |
Array<String> |
An array of active deprecations to ignore. Refer to Dart Sass deprecations. |
fatal_deprecations* |
Array<String> |
An array of deprecations to treat as fatal. Refer to Dart Sass deprecations. |
future_deprecations* |
Array<String> |
An array of future deprecations to opt-into early. Refer to Dart Sass deprecations. |
importers* |
Array<Object> |
Custom importers to use when resolving @import directives. |
When changing config options in Development environment, you may need to clear
your assets cache (rm -r tmp/cache/assets) and restart your Rails server.
This gem is a drop-in replacement to sass-rails. Note the following differences:
- This library does not apply SASS processing to
.cssfiles. Please ensure all your SASS files have file extension.scss. config.sass.stylevalues:nestedand:compactwill behave as:expanded. Use:compressedfor minification.config.sass.line_commentsoption is ignored and will always be disabled.
- dartsass-rails: The Rails organization maintains its own wrapper for Dart Sass. Unlike this gem, dartsass-rails does not support Sprockets.
- This gem is maintained and used in production by TableCheck. (We'd be very glad if the Sass organization could take over maintainership in the future!)
- Thank you to Natsuki for the sass-embedded gem.
- Credit to Ryan Boland and the authors of the original sass/sassc-rails and sass-rails gems.
- See our awesome contributors.
- Fork it (/~https://github.com/tablecheck/dartsass-sprockets/fork)
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - try to include tests - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
