How to change theme? Editing src/public/css/main.scss throws error "Incompatible units: 'rem' and 'px'."

[JohnReedLOL]

I want to change the theme from default to flatly. I think that the way to do that is by modifying this file.

Namely changing these lines:

@import "themes/default/variables";

@import "lib/bootstrap/bootstrap";
@import "lib/font-awesome/font-awesome";

@import "themes/default/default";

To this:

@import "themes/flatly/variables";

@import "lib/bootstrap/bootstrap";
@import "lib/font-awesome/font-awesome";

@import "themes/flatly/flatly";

But I get this error:

$ npm run build && npm start

> [email protected] build /Users/john-michaelreed/code/TypeScript-Node-Starter
> npm run build-sass && npm run build-ts && npm run lint && npm run copy-static-assets


> [email protected] build-sass /Users/john-michaelreed/code/TypeScript-Node-Starter
> node-sass src/public/css/main.scss dist/public/css/main.css

{
  "status": 1,
  "file": "/Users/john-michaelreed/code/TypeScript-Node-Starter/src/public/css/lib/bootstrap/_variables.scss",
  "line": 445,
  "column": 41,
  "message": "Incompatible units: 'rem' and 'px'.",
  "formatted": "Error: Incompatible units: 'rem' and 'px'.\n        on line 445 of src/public/css/lib/bootstrap/_variables.scss\n        from line 9 of src/public/css/lib/bootstrap/bootstrap.scss\n        from line 3 of src/public/css/main.scss\n>> $input-height-inner:                    ($font-size-base * $input-btn-line-h\n   ----------------------------------------^\n"
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-sass: `node-sass src/public/css/main.scss dist/public/css/main.css`
npm ERR! Exit status 1

How do I change the theme?

[JohnReedLOL]

I tried updating it to this for the gsdk theme:

// @import "themes/default/variables";

@import "lib/bootstrap/bootstrap";
@import "lib/font-awesome/font-awesome";

@import "themes/gsdk/gsdk";

I did npm run build-sass before npm run build && npm start. It compiled but the website didn't change.

[peterblazejewicz]

Hi, So this project is based on the hackaton starter project, see this PoC PR with details how to udpate themes to recent one and rewrite/update details: https://github.com/sahat/hackathon-starter/pull/1015 hth

[YasharF]

@JohnReedLOL assuming that you are trying to use GSDK (https://www.creative-tim.com/product/get-shit-done-kit); we used to have it as part of the base theme for hackathon-starter, but removed it because it is not compatible with Bootstrap 4. If I remember it correctly, the error that you are getting "message": "Incompatible units: 'rem' and 'px'.", is one of those Bootstrap 3 vs 4 incompatibility issues.

[JohnReedLOL]

@YasharF I want to use literally any theme that isn't the default because the default looks bad. I cannot get any non-default theme to work. Is there any way you can fix this issue?

[YasharF]

I think I figured out what the problem is. I verified that what you have in your original post doesn't work, but the same change in hackathon-starter does work. I looked at the source code in this repo, and it looks like this repo is out of sync with hackathon-starter. https://github.com/microsoft/TypeScript-Node-Starter/blob/master/src/public/css/themes/flatly/_flatly.scss is Flatly 3.3.7 which is not compatible with Bootstrap 4. This is already fixed with a bunch of other bug fixes in hackathon-starter. @peterblazejewicz there is going to be more improvements, feature additions, and bug fixes in hackathon-starter, and perhaps a better process for getting patches from there to here could help. I can probably submit a PR with a bunch of patches in about a week or two, but can't 100% commit to it at this point.

By the way, in the way we have implemented hackathon starter, you don't even need to rebuild, or even restart the server. Just making the following changes and a hard refresh on the browser is enough to load the new theme:

diff --git a/public/css/main.scss b/public/css/main.scss
index edfb209..0bb6d6a 100755
--- a/public/css/main.scss
+++ b/public/css/main.scss
@@ -1,4 +1,4 @@
-@import "themes/default/variables";
+@import "themes/flatly/variables";

 @import "node_modules/bootstrap/scss/bootstrap";
 @import "node_modules/@ladjs/bootstrap-social/bootstrap-social.scss";
@@ -7,7 +7,7 @@
 @import "node_modules/@fortawesome/fontawesome-free/scss/regular";
 @import "node_modules/@fortawesome/fontawesome-free/scss/solid";

-@import "themes/default/default";
+@import "themes/flatly/flatly";

 // Scaffolding
 // -------------------------

Before:

After:

[peterblazejewicz]

there is going to be more improvements, feature additions, and bug fixes in hackathon-starter, and perhaps a better process for getting patches from there to here could help. I can probably submit a PR with a bunch of patches in about a week or two, but can't 100% commit to it at this point.

/cc @orta any thoughs on this? Thanks!

[YasharF]

I took another look at this repo:

• I am not sure if I can sign the CLA that is required for PRs in this repo, at this time. So perhaps instead of me trying to open a PR here, I can help with the process so you guys can cherry-pick the commits/git diffs from the other repo.
• It looks like there are a bunch of other fixes that need to be ported too. For example, the Font Awesome library is fairly out of date and is added as static files, while in hackathon-starter we moved to have it set to the most recent major release and to have npm dynamically pull the latest version at deployment. Changes like this require some decisions from your end, hence me submitting PRs using patches in the other project might not be the most efficient way.

[cookiegreg]

I think I figured out what the problem is. I verified that what you have in your original post doesn't work, but the same change in hackathon-starter does work. I looked at the source code in this repo, and it looks like this repo is out of sync with hackathon-starter. https://github.com/microsoft/TypeScript-Node-Starter/blob/master/src/public/css/themes/flatly/_flatly.scss is Flatly 3.3.7 which is not compatible with Bootstrap 4. This is already fixed with a bunch of other bug fixes in hackathon-starter. @peterblazejewicz there is going to be more improvements, feature additions, and bug fixes in hackathon-starter, and perhaps a better process for getting patches from there to here could help. I can probably submit a PR with a bunch of patches in about a week or two, but can't 100% commit to it at this point.

By the way, in the way we have implemented hackathon starter, you don't even need to rebuild, or even restart the server. Just making the following changes and a hard refresh on the browser is enough to load the new theme:

diff --git a/public/css/main.scss b/public/css/main.scss
index edfb209..0bb6d6a 100755
--- a/public/css/main.scss
+++ b/public/css/main.scss
@@ -1,4 +1,4 @@
-@import "themes/default/variables";
+@import "themes/flatly/variables";

 @import "node_modules/bootstrap/scss/bootstrap";
 @import "node_modules/@ladjs/bootstrap-social/bootstrap-social.scss";
@@ -7,7 +7,7 @@
 @import "node_modules/@fortawesome/fontawesome-free/scss/regular";
 @import "node_modules/@fortawesome/fontawesome-free/scss/solid";

-@import "themes/default/default";
+@import "themes/flatly/flatly";

 // Scaffolding
 // -------------------------

Before:

After:

Hi, thanks for this project, but it's not working for me either. I have just download the project and modify the main.scss file and the theme remains the same.