• Stars
    star
    206
  • Rank 190,504 (Top 4 %)
  • Language
    Ruby
  • License
    MIT License
  • Created almost 3 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Integrate Dart Sass with the asset pipeline in Rails

Dart Sass for Rails

Sass is a stylesheet language thatโ€™s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.

This gem wraps the standalone executable version of the Dart version of Sass. The platform specific Dart Sass executables are distributed by sass-embedded gem.

The installer will create your default Sass input file in app/assets/stylesheets/application.scss. This is where you should import all the style files to be compiled using the @use rule. When you run rails dartsass:build, this input file will be used to generate the output in app/assets/builds/application.css. That's the output CSS that you'll include in your app. The load path for Sass is automatically configured to be app/assets/stylesheets.

If you need to configure the build process โ€“ beyond configuring the build files โ€“ you can run bundle exec dartsass to access the platform-specific executable, and give it your own build options.

When you're developing your application, you want to run Dart Sass in watch mode, so changes are automatically reflected in the generated CSS output. You can do this either by running rails dartsass:watch as a separate process, or by running ./bin/dev which uses foreman to start both the Dart Sass watch process and the rails server in development mode.

Installation

  1. Run ./bin/bundle add dartsass-rails
  2. Run ./bin/rails dartsass:install

Building in production

The dartsass:build is automatically attached to assets:precompile, so before the asset pipeline digests the files, the Dart Sass output will be generated.

Configuring builds

By default, only app/assets/stylesheets/application.scss will be built. If you'd like to change the path of this stylesheet, add additional entry points, or customize the name of the built file, use the Rails.application.config.dartsass.builds configuration hash.

# config/initializers/dartsass.rb
Rails.application.config.dartsass.builds = {
  "app/index.sass"  => "app.css",
  "site.scss"       => "site.css"
}

The hash key is the relative path to a Sass file in app/assets/stylesheets/ and the hash value will be the name of the file output to app/assets/builds/.

Configuring build options

By default, sass is invoked with --style=compressed --no-source-map. You can adjust these options by overwriting Rails.application.config.dartsass.build_options.

# config/initializers/dartsass.rb
Rails.application.config.dartsass.build_options << " --quiet-deps"

Importing assets from gems

dartsass:build includes application assets paths as Sass load paths. Assuming the gem has made assets visible to the Rails application, no additional configuration is required to use them.

Migrating from sass-rails

If you're migrating from sass-rails (applies to sassc-rails as well) and want to switch to dartsass-rails, follow these instructions below:

  1. Remove the sass-rails gem from the Gemfile by running

    ./bin/bundle remove sass-rails
    
  2. Install dartsass-rails by following the Installation instructions above

  3. Remove any references to Sass files from the Sprockets manifest file: app/assets/config/manifest.js

  4. In your continuous integration pipeline, before running any tests that interact with the browser, make sure to build the Sass files by running:

    bundle exec rails dartsass:build
    

Troubleshooting

Some common problems experienced by users:

LoadError: cannot load such file -- sassc

The reason for the above error is that Sprockets is trying to build Sass files but the sass-rails or sassc-rails gems are not installed. This is expected, since Dart Sass is used instead to build Sass files, and the solution is to make sure that Sprockets is not building any Sass files.

There are three reasons why this error can occur:

Sass files are referenced in the Sprockets manifest file

If any Sass files are referenced in the Sprockets manifest file (app/assets/config/manifest.js) Sprockets will try to build the Sass files and fail.

Solution

Remove any references to Sass files from the Sprockets manifest file. These are now handled by Dart Sass. If you have more Sass files than application.scss, make sure these are compiled by Dart Sass (see Configuring builds above).

Running locally

If you receive this error when running the Rails server locally and have already removed any references to Sass files from the Sprockets manifest file, the Dart Sass process is most likely not running.

Solution

Make sure the Dart Sass process is running by starting the Rails sever by running: ./bin/dev.

Running continuous integration pipelines

If you receive this error when running tests that interact with the browser in a continuous integration pipeline and have removed any references to Sass files from the Sprockets manifest file, the Sass files have most likely not been built.

Solution

Add a step to the continuous integration pipeline to build the Sass files with the following command: bundle exec rails dartsass:build.

Version

bundle exec dartsass --version

License

Dart Sass for Rails is released under the MIT License. Sass is released under the MIT License.

More Repositories

1

rails

Ruby on Rails
Ruby
55,483
star
2

webpacker

Use Webpack to manage app-like JavaScript modules in Rails
Ruby
5,308
star
3

thor

Thor is a toolkit for building powerful command-line interfaces.
Ruby
5,115
star
4

jbuilder

Jbuilder: generate JSON objects with a Builder-style DSL
Ruby
4,324
star
5

spring

Rails application preloader
Ruby
2,804
star
6

jquery-ujs

Ruby on Rails unobtrusive scripting adapter for jQuery
JavaScript
2,607
star
7

rails-dev-box

A virtual machine for Ruby on Rails core development
Shell
2,050
star
8

solid_queue

Database-backed Active Job backend
Ruby
1,709
star
9

tailwindcss-rails

Ruby
1,388
star
10

kredis

Higher-level data structures built on Redis
Ruby
1,376
star
11

activeresource

Connects business objects and REST web services
Ruby
1,322
star
12

docked

Running Rails from Docker for easy start to development
Dockerfile
1,291
star
13

strong_parameters

Taint and required checking for Action Pack and enforcement in Active Model
Ruby
1,270
star
14

globalid

Identify app models with a URI
Ruby
1,195
star
15

actioncable

Framework for real-time communication over websockets
1,084
star
16

importmap-rails

Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
Ruby
1,037
star
17

jquery-rails

A gem to automate using jQuery with Rails
Ruby
947
star
18

sprockets

Rack-based asset packaging system
Ruby
937
star
19

sass-rails

Ruby on Rails stylesheet engine for Sass
Ruby
859
star
20

propshaft

Deliver assets for Rails
Ruby
855
star
21

exception_notification

NOTICE: official repository moved to https://github.com/smartinez87/exception_notification
Ruby
841
star
22

sdoc

Standalone sdoc generator
JavaScript
822
star
23

jsbundling-rails

Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.
Ruby
819
star
24

solid_cache

A database-backed ActiveSupport::Cache::Store
Ruby
786
star
25

rails-perftest

Benchmark and profile your Rails apps
Ruby
780
star
26

activejob

Declare job classes that can be run by a variety of queueing backends
Ruby
744
star
27

activestorage

Store files in Rails applications
734
star
28

pjax_rails

PJAX integration for Rails
Ruby
667
star
29

actioncable-examples

Action Cable Examples
Ruby
663
star
30

cache_digests

Ruby
643
star
31

sprockets-rails

Sprockets Rails integration
Ruby
575
star
32

cssbundling-rails

Bundle and process CSS in Rails with Tailwind, PostCSS, and Sass via Node.js.
Ruby
568
star
33

activerecord-session_store

Active Record's Session Store extracted from Rails
Ruby
539
star
34

execjs

Run JavaScript code from Ruby
Ruby
528
star
35

rails-observers

Rails observer (removed from core in Rails 4.0)
Ruby
516
star
36

mission_control-jobs

Dashboard and Active Job extensions to operate and troubleshoot background jobs
Ruby
491
star
37

actiontext

Edit and display rich text in Rails applications
406
star
38

request.js

JavaScript
386
star
39

acts_as_list

NOTICE: official repository moved to https://github.com/swanandp/acts_as_list
Ruby
385
star
40

marcel

Find the mime type of files, examining file, filename and declared type
Ruby
383
star
41

rubocop-rails-omakase

Omakase Ruby styling for Rails
Ruby
380
star
42

actionpack-page_caching

Static page caching for Action Pack (removed from core in Rails 4.0)
Ruby
347
star
43

commands

Run Rake/Rails commands through the console
Ruby
337
star
44

ssl_requirement

NOTICE: official repository moved to https://github.com/retr0h/ssl_requirement
Ruby
315
star
45

rails-controller-testing

Brings back `assigns` and `assert_template` to your Rails tests
Ruby
303
star
46

rails-html-sanitizer

Ruby
302
star
47

open_id_authentication

NOTICE: official repository moved to https://github.com/Velir/open_id_authentication
Ruby
285
star
48

acts_as_tree

NOTICE: official repository moved to https://github.com/amerine/acts_as_tree
Ruby
281
star
49

actionpack-action_caching

Action caching for Action Pack (removed from core in Rails 4.0)
Ruby
260
star
50

in_place_editing

NOTICE: official repository moved to https://github.com/amerine/in_place_editing
Ruby
230
star
51

protected_attributes

Protect attributes from mass-assignment in ActiveRecord models.
Ruby
229
star
52

journey

A router for rails
Ruby
221
star
53

auto_complete

NOTICE: official repository moved to https://github.com/david-kerins/auto_complete
Ruby
211
star
54

dynamic_form

NOTICE: official repository moved to https://github.com/joelmoss/dynamic_form
Ruby
192
star
55

solid_cable

A database backed ActionCable adapter
Ruby
187
star
56

country_select

NOTICE: official repository moved to https://github.com/stefanpenner/country_select
Ruby
176
star
57

rails-dom-testing

Extracting DomAssertions and SelectorAssertions from ActionView.
Ruby
174
star
58

routing_concerns

Abstract common routing resource concerns to cut down on duplication.
Ruby
154
star
59

esbuild-rails

Bundle and transpile JavaScript in Rails with esbuild
Ruby
147
star
60

rails-contributors

The web application that runs https://contributors.rubyonrails.org
Ruby
138
star
61

rails-new

Create Rails projects with Ruby installed
Rust
125
star
62

actionmailbox

Receive and process incoming emails in Rails
125
star
63

requestjs-rails

JavaScript
119
star
64

activemodel-globalid

Serializing models to a single string makes it easy to pass references around
Ruby
90
star
65

account_location

NOTICE: official repository moved to https://github.com/bbommarito/account_location
Ruby
73
star
66

acts_as_nested_set

NOTICE: official repository moved to https://github.com/bbommarito/acts_as_nested_set
Ruby
71
star
67

iso-3166-country-select

WARNING: this repo is not maintained anymore, if you want to maintain it, please send an mail to rails-core
Ruby
70
star
68

activerecord-deprecated_finders

Ruby
68
star
69

spring-watcher-listen

Ruby
64
star
70

website

HTML
64
star
71

weblog

Superseded by https://github.com/rails/website
HTML
63
star
72

prototype-ujs

JavaScript
62
star
73

prototype_legacy_helper

WARNING: this repo is not maintained anymore, if you want to maintain it, please send an mail to rails-core
Ruby
60
star
74

verification

NOTICE: official repository moved to https://github.com/sikachu/verification
Ruby
58
star
75

prototype-rails

Add RJS, Prototype, and Scriptaculous helpers to Rails 3.1+ apps
Ruby
55
star
76

activemodel-serializers-xml

Ruby
52
star
77

record_tag_helper

ActionView Record Tag Helpers
Ruby
51
star
78

homepage

Superseded by https://github.com/rails/website
HTML
50
star
79

rollupjs-rails

Bundle and transpile JavaScript in Rails with rollup.js
Ruby
49
star
80

actionpack-xml_parser

XML parameters parser for Action Pack (removed from core in Rails 4.0)
Ruby
49
star
81

activesupport-json_encoder

Ruby
48
star
82

etagger

Declare what goes in to your ETags: asset versions, account ID, etc.
Ruby
41
star
83

upload_progress

NOTICE: official repository moved to https://github.com/rishav/upload_progress
Ruby
39
star
84

devcontainer

Shell
38
star
85

atom_feed_helper

NOTICE: official repository moved to https://github.com/TrevorBramble/atom_feed_helper
Ruby
38
star
86

render_component

NOTICE: official repository moved to https://github.com/malev/render_component. Components allow you to call other actions for their rendered response while executing another action
Ruby
38
star
87

gsoc2014

Project website and wiki for Ruby on Rails proposals to Google Summer of Code 2014
37
star
88

gsoc2013

Project website and wiki for Ruby on Rails proposals to Google Summer of Code 2013
31
star
89

ruby-coffee-script

Ruby CoffeeScript Compiler
Ruby
28
star
90

asset_server

NOTICE: official repository moved to https://github.com/andhapp/asset_server
Ruby
27
star
91

homepage-2011

This repo is now legacy. New homepage is at rails/homepage
HTML
27
star
92

deadlock_retry

NOTICE: official repository moved to https://github.com/heaps/deadlock_retry
Ruby
27
star
93

rails-docs-server

Ruby
25
star
94

token_generator

NOTICE: official repository moved to https://github.com/bbommarito/token_generator
Ruby
25
star
95

http_authentication

NOTICE: official repository moved to https://github.com/dshimy/http_authentication
Ruby
22
star
96

irs_process_scripts

WARNING: this repo is not maintained anymore, if you want to maintain it, please send an mail to rails-core. The extracted inspector, reaper, and spawner scripts from script/process/*
22
star
97

javascript_test

WARNING: this repo is not maintained anymore, if you want to maintain it, please send an mail to rails-core
JavaScript
19
star
98

buildkite-config

Fallback configuration for branches that lack a .buildkite/ directory
Ruby
18
star
99

scriptaculous_slider

WARNING: this repo is not maintained anymore, if you want to maintain it, please send an mail to rails-core
JavaScript
18
star
100

request_profiler

WARNING: this repo is not maintained anymore, if you want to maintain it, please send an mail to rails-core. Request profiler based on integration test scripts
Ruby
17
star