Using UiKit but custom styles won't override without !important;

[joshb]

Hi.

I’ve followed these steps to use UiKit with Sage 9:

WordPress Theme Development With Sage 9 and UIkit – ITNEXT

This is what my main.scss file looks like:

/**
 * Variables
**/

@import "common/variables";

/**  Import everything from autoload */

@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */

// @import "~some-node-module";
@import "~uikit/dist/css/uikit.css";

/** Import theme styles */

@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

It pull in the UiKit style just fine but I’m having trouble overriding the variables. The only way they are delivered is if I use the !important rule.

I’ve attempted to change the order of my imports around and I’ve imported UiKits scss files directly into my main.scss file but I can’t seem to figure this one out.

Am I doing something wrong? Perhaps I missed something?

Appreciate any help.

[karel]

if you are trying to override any of those uikit styles that have !important rule then
then yes you should use also important rules in your stylesheet OR you can also import uikit styles to your project manually (copy paste) and remove all !important rules …

[alwaysblank]

Have you tried the setup recommended on the Uikit website? https://getuikit.com/docs/sass#how-to-build