Hello! I’m fairly new to web programming, tough I’ve been developing mobile for a long time already. I was trying to set up a WordPress page using the Bootstrap Starter Theme for WordPress.
Steps I followed before my problem:
1. I downloaded from https://them.es/starter-bootstrap/ a theme with my custom settings.
2. I added the new Theme to my WordPress page, and activated it
3. I used that same file on my local machine, and installed all the npm dependencies
4. I run the
npm run watch command
After all these steps, I modify the
main.scss file, for example creating a color and updating the colors map according to the documentation.
//4. Include any default map overrides here
//Create your own map
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
I let watch to compile all the files correctly, and after that, I copy all the files to the “themes” folder inside my wordpress folders.
The problem is that if I try to use this new value on a page, for example using
bg-testcolor in a
nav, the variable won’t get used. If I inspect the code, the values that I see being used are from
_root.scss, and it won’t have this new
testcolor. If I continue looking at the inspector, the themes/mytheme/assets/dist/main.css will have the value correctly defined, but it is just not existing on the inspected code.
Did I forget to configure anything?
I hope I made myself clear, maybe this wasn’t asked the correct way. Thanks!
Seems like importing
<link rel="stylesheet" href="wp-content/themes/my_theme/assets/dist/main.css">
header.php‘s header makes the page indeed use the variable I want of the compiled
main.css file. I’m wondering if I missed some step on the installation process and the WordPress Theme is not using the correct variables? Ehitherway, now it feels like it’s working!!