Include custom themes

[pochemuto]

How to include custom bootstrap theme? I downloaded theme from https://bootswatch.com. It contains two files: bootswatch.less and variables.less.

I had placed its in app folder and imported from bootstrap.config.less

@import "./theme/lumen/variables";
@import "./theme/lumen/bootswatch";

Theme changed but it looks broken. Maybe bootswatch.less overrides bootstrap styles and should be imported last ?

There is my configuration: https://github.com/pochemuto/mortgage

[pochemuto]

Issues was with redundant import bootstrap-webpack in js code: import "bootstrap-webpack";

[pochemuto]

So, yes. The problem is there. Import was redundant but removing them didn't help. The problem is related that ticket https://github.com/gowravshekar/bootstrap-webpack/issues/23

I found workaround: create somewhere in your app folder bootstrap.less file with following content:

@import "~bootstrap/less/mixins";
@import "theme/lumen/variables";
@import "theme/lumen/bootswatch";

bootswatch requires variables and last one might have bootstrap dependencies. In my case it was mixins.

Add file path to entry in webpack.config.js:

module.exports = {
    context: __dirname + "/app",
    entry: ['!!bootstrap-webpack!../bootstrap.config.js', './client/index.ts', './client/css/bootstrap.less'],
    output: ...

And then it will work.