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
$custom-colors: (
"testcolor": #900
);
// 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!
EDIT:
Seems like importing
<link rel="stylesheet" href="wp-content/themes/my_theme/assets/dist/main.css">
In my 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!!
