[Feature Request in Docs] Advanced webpack usage for custom styling

[mechanic22]

UIkit version

3.0.0-rc.4

What is Expected?

Ability to add custom themes and icons when using uikit and webpack from npm

What is actually happening?

I had to completely write my own build script and completely reorganize the base scss to load in a different order to get the correct mixins and overrides to occur and the order I used. I also had to go through and add !default in many places.

Seems to work if....

If you build from source using your build scripts right from src UIKit seesm very customizable, however using a system like webpack and pulling from npm into a node_modules folder it seems very complex.

Icons

For example, adding in custom icons, in the docs you say you have to put the icons in the custom/** folder, however we shouldn't be modifying the node_modules/uikit folder, especially checking that into source control. So, i had to completely create a custom build script to look elsewhere.

My new base.scss for order of scss operations

// 1. Local Global Variable Overrides (does not require !default suffix)
@import "pinewood/global-variables.scss";

// 2. Global Variables (which all had to be suffixed with !default - this is a copy of uikit/src/scss/components/variables.scss, pulled local so i can make modifications for my clients project instead of modifying the very ugly variables.scss)
@import "uikit/base/global-variables.scss";

// 3. Base Variables (these are all the component's base variables suffixed with !default - it is uikit/src/scss/components/_import.scss without the "variables.scss" import)
@import "Client/uikit/base/_import-variables.scss";

// 4. Theme Variables (any custom variables I have for my theme that don't deal with uikit at all)
@import "pinewood/_import-variables.scss";

// 5. Global Mixins
@import "Client/uikit/base/global-mixins.scss";

// 6. Base Mixins
@import "Client/uikit/base/_import-mixins.scss";

// 7. Theme Mixins

// 8. Local Mixin Overrides

// 9. Import UIkit components (relevant to my clients site)
@import "Client/uikit/components.scss";

The order is different for scss and mixins since with classes is it first in wins where mixins last in wins, and since your src has these in the same file it is hard to do custom changes to both without using the very ugly variables.scss.

Just my two cents and would really like to see some examples on how to do custom scss, custom mixins, and custom icons using the npm package and webpack. Your webpack example is very basic, you are even calling the dist/css from the node_modules folder. I have tried a couple times to get this to work but I always find myself having to pull the scss out of the node_modules directory through some process or manually to make it work for customization. I do realize I can just create a global "overrides" like the processed variables.scss file you have but it just seems very complex to work with.

It just seems like there has to be an easier way when using webpack.

Currently it seems like you would have to:

• Add custom icons to a folder in src
• install uikit from npm
• Copy the icon files and any custom scss/css from there to the node_modules/uikit/custom
• Run the entire UIKit build processes where the working directory is node_modules/uikit
• Reference the dist folder in webpack

But hoping there is a better way

[mechanic22]

FYI i found out if I call this in my javascript after Icons are loaded I can load custom icons after the fact

UIkit.icon.add({
    "iconname": " <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"20px\" height=\"20px\" ...  </svg>"
});

Is this something we "should" do or is it possibly going to be deprecated as I could not find this in any of the documentation