Custom Theme Questions


#1

We have a highly customized bootstrap theme we’re migrating from a standalone meteor app which has presented some problems for me as I migrate the theme into reaction using the instructions here (https://docs.reactioncommerce.com/reaction-docs/master/creating-a-theme). The default theme is overriding many of our customizations. Is there a way to disable the default theme from within our theme or app? Older threads mention this but the new instructions for custom themes make no mention of disabling it.

Additionally, we’re using SASS instead of LESS with an external compiler. I’d like to avoid the 20-30 second app refresh as we do incremental updates our styles. Do you have any recommendations?

My local dev environment:
Node: 6.10.2
NPM: 3.10.10
Reaction CLI: 0.8.0
Reaction: 1.1.1
Reaction Branch: master

Much appreciated,
James


#2

Is it due to specificity issues, or the variables? Are you using the SASS version of Bootstrap 3 or Bootstrap 4?

Try being more specific in your rules? We use .rui prefix in a lot of our components which might be causing issues for you.

The nuclear option:
You could try disabling the default theme by renaming index.less in /imports/plugins/included/default-theme/client/index.less to index.disabled and restart. However, you’ll have to include or re-implement all the CSS needed for the admin to function. see /imports/plugins/included/default-theme/client/styles/main.less for all included styles.


That said, this is an area in need of improvement, and a topic we are definitely working on better documentation. This includes splitting and better name spacing of the admin theme.


#3

Hi Mike, thanks for the quick response. :slight_smile:

With the original app, we were using pure bootstrap names with customizations, plus a large number of new app only names as well. So yes it’s a specificity issue that I’m running into as the unaltered rules in the default theme are conflicting with the same names on our theme. The variables aren’t posing a problem. I’ll keep reviewing to see if I can get more specific before going nuclear, thank you for clarifying that for me.

Regarding my other question about compiling our CSS externally. I’m currently loading the .css file using the @import “./styles/main.css” within the /imports/plugins/custom/app-theme/client/index.js file. I’ve noticed the system loads the CSS as an internal stylesheet. Any way to keep it as just a linked external? Would this avoid the 20-30 second app refresh?

Almost forgot, we’re using SASS bootstrap 3.


#4

You can try doing adding it to the head like so:

  1. in custom/client add an html file styles.html (name doesn’t matter)

  2. add the following (using a style or link tag, your choice)

<head>
   <style>@import "path/to/css";</style>
</head>

Not sure a local file system path will resolve correctly. You might be able to serve CSS locally from an http server.