search

dennisreimann / uiengine

Workbench for UI-driven development
https://uiengine.uix.space/
MIT License
366 stars 25 forks source link

Question - Sass Support #21

Closed azamatsmith closed 6 years ago

azamatsmith commented 6 years ago

Is your feature request related to a problem? Please describe. I looked through the documentation but I could not see how I would go about adding sass support to a project. Ideally I would add the main scss file here.

Describe the solution you'd like I'd like to either know how to do this, or if you could point me in the right direction to how I can contribute this feature to the project.

Describe alternatives you've considered I tried adding babel-plugin-sass-export as a plugin to the js adapter but it ended up crashing uiengine.

dennisreimann commented 6 years ago

I think you won‘t need an adapter for that. Adapters are currently mostly meant for rendering templates. You could use them for also adding a new SASS file when you scaffold a new component, but I assume right now you just want to get the resulting CSS into the preview template, right?

To do so, use your normal build process (grunt, gulp, webpack, etc.) to turn the SASS into CSS. The UIengine has no assumption or requirements for how this has to happen, as this is part of the app build. Then you can reference the CSS file(s) in the preview template that is referenced in your config file as template. It is supposed to live in the source.templates directory, also specified in the config.

The ui.customStylesFile config option is for referencing a CSS file that modifies the look of the UIengine interface. Let‘s say you want to theme it to fit your clients brand and change the color of the dark blue sidebar to red.

Does this help?

azamatsmith commented 6 years ago

Thanks @dennisreimann. That definitely clears a few things up.

I added a compiler to try to get this up and running but since we reference our sass style imports inside of each component, uiengine throws an error.

Feel free to close this issue.

dennisreimann commented 6 years ago

In case you are still interested you can have a look at the React sample project. I am doing something similar using CSS modules there: https://github.com/dennisreimann/uiengine-sample-react

Otherwise maybe post the repo url, so that I can have a look at the error?