How do I override form styles in inuit.css?

Is there a recommended way to override/alter the form styles in inuit.css?

The inuit.css/base/_forms.scss has a rule setting label tags to display: block;, which is breaking a CMS I'm using. Certainly I could modify this file, or remove the import from _inuit.scss, but neither seems like a good approach.

Adding a rule in _vars.scss, which is a recommended approach for overriding defaults doesn't work. Both rules end up in the compiled css file, and the built-in one takes precedence.

Solution

In css/style.scss you add your own files like this:

/**
 * She’s all yours, cap’n... Begin importing your stuff here.
 */
//@import "ui/example";
@import
        "ui/base",
        "ui/forms"
;

Now you override display: block; in your own _forms.scss:

label {
    display: inline;
}

Notes:

The _vars.scss is the recommended way to override inuit.css variables, not styles – Use own imported CSS files to override styles (see above)
Don't alter the inuit.css files itself, because you'll lose these changes as soon as you update
Check out the README.md for instructions on how to use inuit.css