### Install Dartsass-Rails Gem Source: https://context7.com/rails/dartsass-rails/llms.txt Installs the dartsass-rails gem and its necessary assets into a Rails project. This process involves adding the gem to the Gemfile, running the installer, and updating configuration files like the asset manifest and Procfile.dev. ```bash # Add to Gemfile ./bin/bundle add dartsass-rails # Run installer ./bin/rails dartsass:install # The installer: # 1. Creates app/assets/builds/ directory with .keep file # 2. Updates app/assets/config/manifest.js: # - Adds: //= link_tree ../builds # - Removes: //= link_directory ../stylesheets .css # 3. Creates app/assets/stylesheets/application.scss (if not exists) # 4. Creates Procfile.dev with web and css processes # 5. Creates bin/dev script for foreman # 6. Updates .gitignore: # /app/assets/builds/* # !/app/assets/builds/.keep # 7. Installs foreman gem # 8. Runs initial dartsass:build ``` -------------------------------- ### Install Dartsass-Rails (Bash) Source: https://context7.com/rails/dartsass-rails/llms.txt Sets up the necessary files and configuration for using dartsass-rails in a Rails application. This includes creating directories, default SCSS files, Procfile.dev, bin/dev script, updating manifest.js, and .gitignore. ```bash # Install dartsass-rails into your application bundle exec rails dartsass:install # Creates: # - app/assets/builds/ directory # - app/assets/stylesheets/application.scss (if not exists) # - Procfile.dev with web and css processes # - bin/dev script for running foreman # - Updates app/assets/config/manifest.js # - Updates .gitignore to exclude builds # - Runs initial dartsass:build ``` -------------------------------- ### Migrate from Sass-Rails to Dartsass-Rails Source: https://context7.com/rails/dartsass-rails/llms.txt Provides steps to migrate a Rails project from sass-rails or sassc-rails to dartsass-rails. This involves removing the old gem, installing the new one, running the installer, and updating configuration files and CI/test setups to ensure compatibility. ```bash # 1. Remove sass-rails or sassc-rails ./bin/bundle remove sass-rails # 2. Install dartsass-rails ./bin/bundle add dartsass-rails ./bin/rails dartsass:install # 3. Update app/assets/config/manifest.js # Remove lines like: # //= link_directory ../stylesheets .css # The installer does this automatically # 4. Update CI pipeline (e.g., .github/workflows/ci.yml) # Add before tests: - name: Build CSS run: bundle exec rails dartsass:build # 5. Update test setup (test/test_helper.rb or spec/rails_helper.rb) # For system tests, ensure CSS is built: Rake::Task["dartsass:build"].invoke if Rails.env.test? ``` -------------------------------- ### Import Gem Stylesheets in Sass Source: https://context7.com/rails/dartsass-rails/llms.txt Demonstrates how to import stylesheets from installed gems into your application's Sass files. Dartsass-rails automatically configures Sass load paths to include gem assets, allowing direct use of @use or @import. ```scss // app/assets/stylesheets/application.scss // Import from gems using @use or @import @use "bootstrap/scss/bootstrap"; @use "select2/dist/css/select2"; // Import local partials @use "components/buttons"; @use "layouts/header"; // The load path includes: // - app/assets/stylesheets (default) // - All paths from Rails.application.config.assets.paths // - Gem asset paths registered with Rails ``` -------------------------------- ### Configure Sass Directory-to-Directory Compilation (Ruby) Source: https://github.com/rails/dartsass-rails/blob/main/README.md Enables directory-to-directory compilation for Sass files. All Sass files within the specified source directory (that do not start with an underscore) will be compiled into the target directory. This is useful for managing a large number of Sass files. ```ruby # config/initializers/dartsass.rb Rails.application.config.dartsass.builds = { "." => "." } ``` -------------------------------- ### Remove sass-rails Gem (Bash) Source: https://github.com/rails/dartsass-rails/blob/main/README.md Command to remove the 'sass-rails' gem from your project's Gemfile and installed gems. This is a necessary step when migrating from 'sass-rails' to 'dartsass-rails'. ```bash ./bin/bundle remove sass-rails ``` -------------------------------- ### Configure Sass Build Entry Points and Output Files (Ruby) Source: https://github.com/rails/dartsass-rails/blob/main/README.md Configures the Dart Sass build process by specifying input Sass files and their corresponding output CSS filenames. Allows for multiple entry points and custom output locations. This configuration is typically placed in an initializer file. ```ruby # config/initializers/dartsass.rb Rails.application.config.dartsass.builds = { "app/index.sass" => "app.css", "site.scss" => "site.css" } ``` -------------------------------- ### Configure Sass Build Entry Points (Ruby) Source: https://context7.com/rails/dartsass-rails/llms.txt Configures the Sass source files to be compiled and their corresponding output CSS filenames. Supports single file mapping and directory-to-directory compilation. The default is 'application.scss' to 'application.css'. ```ruby # config/initializers/dartsass.rb Rails.application.config.dartsass.builds = { "application.scss" => "application.css", "admin/dashboard.scss" => "admin.css", "marketing/landing.scss" => "marketing.css" } # Directory-to-directory compilation (compiles all non-underscore files) Rails.application.config.dartsass.builds = { "." => ".", "components" => "components" } # Default configuration if not specified: # { "application.scss" => "application.css" } ``` -------------------------------- ### Dart Sass Executable: Command Line Usage Source: https://context7.com/rails/dartsass-rails/llms.txt Shows how to use the Dart Sass executable directly from the command line for various compilation tasks. Includes checking the version, performing custom compilations with specific options, and using the watch mode for continuous compilation. ```bash # Access the Dart Sass executable directly bundle exec dartsass --version # Output: sass-embedded 1.x.x compiled with dart2js x.x.x # Custom compilation with specific options bundle exec dartsass \ --style=expanded \ --source-map \ --load-path=app/assets/stylesheets \ app/assets/stylesheets/application.scss \ public/stylesheets/application.css # Watch specific files bundle exec dartsass \ --watch \ --style=compressed \ app/assets/stylesheets/theme.scss:public/theme.css ``` -------------------------------- ### Configure Sass Compiler Options (Ruby) Source: https://context7.com/rails/dartsass-rails/llms.txt Defines command-line options passed to the Dart Sass compiler, such as output style and sourcemap settings. Options can be set directly or appended to defaults. Supports options like '--style', '--no-source-map', '--embed-sources', '--no-charset', and '--quiet-deps'. ```ruby # config/initializers/dartsass.rb # Default options (compressed output, no sourcemaps) Rails.application.config.dartsass.build_options = [ "--style=compressed", "--no-source-map" ] # Development with embedded sourcemaps (for Propshaft) Rails.application.config.dartsass.build_options = [ "--embed-sources", "--no-charset" ] # Expanded output with quiet dependency warnings Rails.application.config.dartsass.build_options = [ "--style=expanded", "--quiet-deps", "--no-charset" ] # Adding options to defaults Rails.application.config.dartsass.build_options << "--no-charset" << "--quiet-deps" ``` -------------------------------- ### Build Sass Files Once (Bash) Source: https://context7.com/rails/dartsass-rails/llms.txt Compiles all configured Sass files once and outputs them to the builds directory. This task is automatically run before `assets:precompile` in production, unless `SKIP_CSS_BUILD` is set. It can be manually invoked via `bundle exec rails dartsass:build`. ```bash # Build all Sass files bundle exec rails dartsass:build # Skip CSS build during asset precompilation SKIP_CSS_BUILD=true bundle exec rails assets:precompile # Build is automatically run before assets:precompile bundle exec rails assets:precompile # Output: Compiling app/assets/stylesheets/application.scss to app/assets/builds/application.css ``` -------------------------------- ### Dartsass Engine: Rails Integration and Configuration Source: https://context7.com/rails/dartsass-rails/llms.txt Configures Dart Sass within a Rails application by integrating as a Rails::Engine. It provides default settings for build outputs and compilation options through Rails' configuration system. This allows for easy customization of Sass compilation directly within the Rails app. ```ruby # Access configuration in your Rails app Rails.application.config.dartsass.builds # => { "application.scss" => "application.css" } Rails.application.config.dartsass.build_options # => ["--style=compressed", "--no-source-map"] # The engine automatically loads: # - lib/tasks/*.rake files (dartsass:build, dartsass:watch, etc.) # - Integrates with Rails asset pipeline # - Provides OrderedOptions for configuration # Module structure: module Dartsass class Engine < ::Rails::Engine config.dartsass = ActiveSupport::OrderedOptions.new config.dartsass.builds = { "application.scss" => "application.css" } config.dartsass.build_options = ["--style=compressed", "--no-source-map"] end end ``` -------------------------------- ### Build Sass Files in Production (Bash) Source: https://github.com/rails/dartsass-rails/blob/main/README.md Command to explicitly trigger the Dart Sass build process. This is typically used in continuous integration pipelines before running tests that rely on compiled CSS, ensuring that all Sass files are processed. ```bash bundle exec rails dartsass:build ``` -------------------------------- ### Configure Sass Build Options (Ruby) Source: https://github.com/rails/dartsass-rails/blob/main/README.md Allows customization of the command-line options passed to the Dart Sass executable during the build process. This can be used to modify compilation style, enable/disable source maps, or add other Sass flags. Options are appended to the default list. ```ruby # config/initializers/dartsass.rb Rails.application.config.dartsass.build_options << "--no-charset" << "--quiet-deps" ``` -------------------------------- ### Dartsass Runner: Compile Sass Command Source: https://context7.com/rails/dartsass-rails/llms.txt Generates the command array for compiling Sass files using Dart Sass. It includes options for style, source maps, load paths, and input/output file mappings. This is useful for executing compilation directly or programmatically. ```ruby require 'dartsass/runner' # Get the complete compilation command array command = Dartsass::Runner.dartsass_compile_command # Returns: [ # "/usr/bin/ruby", # "/path/to/exe/dartsass", # "--style=compressed", # "--no-source-map", # "--load-path", "/app/assets/stylesheets", # "--load-path", "/gems/bootstrap/assets/stylesheets", # "/app/assets/stylesheets/application.scss:/app/assets/builds/application.css" # ] # Execute the compilation system(*Dartsass::Runner.dartsass_compile_command, exception: true) # Get individual command components Dartsass::Runner.dartsass_build_options # => ["--style=compressed", "--no-source-map"] Dartsass::Runner.dartsass_load_paths # => ["--load-path", "/app/assets/stylesheets", "--load-path", "/gems/ப்புகளை..."] Dartsass::Runner.dartsass_build_mapping # => ["/app/assets/stylesheets/application.scss:/app/assets/builds/application.css"] ``` -------------------------------- ### Configure Sass Build Options for Sourcemaps with Propshaft (Ruby) Source: https://github.com/rails/dartsass-rails/blob/main/README.md Specifically configures Sass build options to embed source map information when using the propshaft asset bundler. This replaces the default '--no-source-map' with '--embed-sources' to ensure sourcemaps are included. ```ruby Rails.application.config.dartsass.build_options = ['--no-charset', '--embed-sources'] ``` -------------------------------- ### Watch Sass Files for Changes (Bash) Source: https://context7.com/rails/dartsass-rails/llms.txt Runs the Sass compiler in watch mode, automatically recompiling files when source files change. This task is intended for development use and is typically run via a Procfile.dev with tools like foreman. ```bash # Watch for changes and recompile automatically bundle exec rails dartsass:watch # Typically run via Procfile.dev with foreman ./bin/dev # Starts both Rails server and Sass watch process # Procfile.dev contents: # web: bin/rails server -p 3000 # css: bin/rails dartsass:watch ``` -------------------------------- ### Clean Compiled CSS Files (Bash) Source: https://context7.com/rails/dartsass-rails/llms.txt Removes all compiled CSS files from the builds directory. This task is automatically executed as part of `assets:clobber` and can be manually invoked via `bundle exec rails dartsass:clobber`. ```bash # Remove all compiled CSS files bundle exec rails dartsass:clobber # Removes: app/assets/builds/**/*.css and app/assets/builds/**/*.css.map # Automatically run with assets:clobber bundle exec rails assets:clobber # Cleans both standard assets and Dart Sass builds ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.