Learning Path Create an App with Advanced Page Building - Adding Custom Styling not working
Dear forum members, I’m currently learning how to use Mendix and its capabilities. Therefore, I work through various learning paths. Right now I work on a learning path to “Create an App with Advanced Page Building”. However, when it comes to do the custom styling I run into some issues. At this point, I think I have to mention that I’m doing this on a company computer, so this might actually cause at least some of those issues due to security restrictions of the company’s network. I followed the step-by-step guide in order to install gulp on my pc. Nevertheless, I already ran into some problems at this point. For example, when entering the commands into the Windows PowerShell window “npm install” and all other variants of this command it only worked when using the mobile hotspot of my phone. I assume it is being blocked when using the company’s network. Additionally, the “gulp dev” command did not work. The module “gulp-sass” could not be found. Last but not least, when continuing the learning path and trying to customize the theming of the app, there are other problems. First of all, the folder “theme > styles > sass > custom” and its files did not exist. I assume this is due to the incomplete installation I described above. Therefore, I created these subfolders myself and pasted the files “_custom.scss” and “_custom-variables.scss” from the folder “theme > styles > web > sass > app” there. Then I tried to edit the file “_custom-variables.scss” as described in the learning path. But the changes show now effect in the browser. If you can help me with these issues in any way I would be really grateful. Thanks in advance! Kind regards Dominik Ullrich
it seems like you are having two different problems. If the gulp installation is not working, you could use Koala instead.
The second problem is the folder naming. I think the learning path is still showing the folder for Mendix 7 apps. This structure changed in mendix 8. You can find your custom.scss file in theme\styles\web\sass\app
thank you very much for your help! I will work through the guide on how to “Set Up the Mendix UI Framework with Koala” I found.
I already found the correct path I think, at least this is where I copied the custom.scss and custom-variables.scss file from in the first place. However, I also tried editing the original files in theme\styles\web\sass\app but the changes do not become visible in the browser. So I think I might need a little more assistance here.
No it’s actually still not working. Now I do have a completely different problem. When trying to view the app in the browser I end up with some code lines and a giant mendix logo (see screenshot).
I don’t even know if the changes I applied are active.
You need to click on the file in koala. On the right side it opens some options.