A3: How to override styles for UI?

[marinaghb]

Hi, I was wondering if I could receive a code example, or be pointed in the direction of where I might be able to find one in the documentation (in v3), about how to add custom styles for /login page?

I want to override some css styles for users, but I cant find information how to make it in Apostrophe3.

Thank you in advance!

[emengweb]

same question for me, want use uikit on it.

[boutell]

Currently we are using scoped styles in our vue components, which makes this difficult. Also if you made too many changes it would become a maintenance burden as we release changes and updates.

We do however use CSS variables for certain things. Those could be overridden and shouldn't create as many maintenance issues. You can find them in _theme.scss and _theme_mixins.scss in the core.

One complication is that the apostrophe editing styles load after the project-level styles, so our variable settings are going to "win" if you put them in an ordinary ui/src/index.scss file. You can solve that by placing them in aui/apos/variable-overrides.scss file of one of your modules.

Then, because the apos build does not automatically import sass files that are not imported by a javascript module, you will need a ui/apos/apps/variable-overrides.js file that imports those styles. That file needs to export an empty function by default, just to satisfy the requirements for an apostrophe admin UI "app":

import '../variable-overrides.scss';

export default () => {}

I haven't tried this, but it should work and I would be curious to hear about your experiences with the technique.