MelangeCSS

Ruby on Rails

Ruby on Rails requires a few bits of configuration to use CSS files brought in through NPM. You do not need to—and should not—use the CSS Bundling gem to manage MelangeCSS. It is still preferable to use the code below, and I don't currently plan on creating a Ruby gem. Here is how to set it up:

1. Install using the command above. This will add melange-css to your app's package.json file.
2. Add node_modules to the asset path in config/initializers/assets.rb: # config/initializers/assets.rb # ... Rails.application.config.assets.paths << (Rails.root / "node_modules") # ...
3. Add melange.css to your app/assets/stylesheets.css (note that you want to require it before your CSS so you can customize by setting custom properties): /* app/assets/stylesheets.css */ /* * «giant comment from Rails omitted» * *= require "melange-css/melange.css" *= require_tree . *= require_self */
4. If you are using add-ons, `require` them after the base stylesheet but before your code: /* app/assets/stylesheets.css */ /* * «giant comment from Rails omitted» * *= require "melange-css/melange-thin.css" *= require "melange-css/melange-not-small-breakpoint.css" *= require "melange-css/melange-dark-mode.css" *= require_tree . *= require_self */
5. Remember to restart your dev server after making this change.