Hi,I am currently working through the Shapediver Viewer API Youtube tutorials and wanted to style my menu as suggested in the second video. I’m currently attempting to apply custom styling to the menu using a separate CSS stylesheet. My issue is that I can only make the CSS inline commands work, as demonstrated in the video, but my separate stylesheet doesn’t seem to have any effect. I would greatly appreciate it if someone could offer suggestions or tips on what might be causing this issue.
Where are you importing the separate stylesheet?
I’m using Visual Studio Code, following the tutorial. I attempted to include a stylesheet as demonstrated in another video and tested it in a separate project. I generated a stylesheet in the ‘src’ folder and then linked it in the HTML file.
That looks right…perhaps there is an issue with your CSS. If you post it I can try to take a look. You can also try inspecting your page using the dev tools in the browser and see if you can figure out why the styles aren’t applying.
I’ve simplified the CSS to a very basic level to avoid any potential issues. Thanks for the tip about using dev tools. There I’m encountering an error that I don’t fully understand, which reads: 'localhost/:1 Refused to apply style from ‘http://localhost:8080/styles.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
It looks like this error happens when the source for the css file is not correct (in your case the source is “styles.css”). See this stackoverflow thread:
I dont know what your build setup is (are you using webpack? do css files get output to a different directory?), but you could try visiting http://localhost:8080/styles.css and see if your stylesheet shows up in the browser (it should show as plain text). If not, it may be getting output to a different directory or not getting output at all.