The configuration file #
All of Hydrogen's settings can be configured inside of the hydrogen.config.json file generated during the installation process. This file contains a handful of basic development settings and helpful default style configurations that you can change, add to, or remove to produce a look and feel that matches your brand.
Hydrogen's configuration follows a similar theory to a design token approach, where standardizing design decisions inside of the config allows you to leverage them across the whole project in a consistent, easily-updated way.
Each time you run npx h2-build or npx h2-watch, Hydrogen will first validate your configuration file to ensure it has everything it needs for a successful build. If something is missing or improperly formatted, Hydrogen will let you know in the console output.
Core settings #
Input and output #
The input setting accepts an array of paths to the files you'd like Hydrogen to process. You can point to as many paths as you'd like, but be sure to include everywhere you use Hydrogen attributes.
The output setting accepts a single path to the location you would like the CSS file to be placed after a successful build. This location will also be where log files are generated if you enable them.
1
2
3
4
5
"input": [
"path/to/first/input/folder",
"path/to/second/input/folder"
],
"output": "path/to/output/folder"
Process settings #
The include_reset_css setting tells Hydrogen whether or not to include basic reset CSS in its output. If Hydrogen is interfering with your project's existing CSS, disabling this might resolve the issue.
The browser_prefix_css setting enables/disables whether Lightning CSS' browser prefixing service is run on the final CSS output. Lightning provides helpful CSS browser prefixes to ensure compatibility across browsers.
The minify_css setting enables/disables whether Lightning CSS' minification service is run on the final CSS output. Lightning compresses the final output using a series of basic rules to ensure the output file size is as small as possible.
The export_variable_file setting tells Hydrogen whether or not you want a CSS variable file exported to the output folder. Hydrogen's output includes these variables, however, if you want to use the variables on a page that doesn't include Hydrogen, this file can be helpful.
1
2
3
4
5
6
"processing": {
"include_reset_css": true
"browser_prefix_css": true
"minify_css": true
"export_variable_file": false
}
Log settings #
The generate_logs setting tells Hydrogen whether to generate a series of debug files in the output directory. This is especially helpful for developing new Hydrogen features, but can also shed light on unexpected build errors.
The verbose_console_output setting will increase/decrease the volume of information provided in Hydrogen's console output.
1
2
3
4
"logging": {
"generate_logs": false
"verbose_console_output": true
}