2

Ok, I've downloaded the latest version of a bootswatch template and it calls it bootstrap.css. I copied this into the wwwroot/dist folder. Then using NPM

  • I upgraded bootstrap to version 4

  • installed font-awesome

  • installed bootswatch version 4

From the ClientApp/app/components/navmenu folder, I've adjusted the namvmenu.component.html file to be the menu that I want, and for now I've blanked the css in the navmenu.component.css file. The _Layout.cshtml page still has a reference to the vendor.css file. If I simply replace this with bootstrap.css it all goes wrong. I suspect this needs to stay, but I just need to override it in places with bootstrap.css, but I don't know where. I've now managed to get my menu at the top of the page going horizontal. How do I get my component to make a reference to the bootstrap.css file that I downloaded from bootswatch?

Here's a code snippet from the webpack.config.vendor.js file:

const treeShakableModules = [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'zone.js', 
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'bootswatch',
'font-awesome/css/font-awesome.css',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
]; 
const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');

this is the current line of code in the head section of my _layout.cshtml

<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" /> replacing this with bootstrap.css messes the layout up completely, even when I change the vendor.css to bootstrap.css when assigning the const value in the webpack file

bilpor
  • 3,467
  • 6
  • 32
  • 77

1 Answers1

0

You need to rebuild vendor assets with webpack --config webpack.config.vendor.js

If you don't have correct version of webpack cli globally installed then you can instead run the same command as present in your *.csproj file manually:
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

Automatically this command runs only once - when you build your project first time in dev because of the condition:
Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') "

So you also can just delete this folder and rebuild the project.

Pavel Agarkov
  • 3,633
  • 22
  • 18
  • I tried that, but it failed. When you first create the project from the template and do absolutely nothing and just run it, it states that rebuilding manually using the above isn't necessary. I tried however from a developer command prompt and the package manager console. – bilpor Apr 03 '18 at 04:26
  • what do you mean by failed? did this command return an error or didn't it help? Did you try to run it from standalone cmd under administrator? – Pavel Agarkov Apr 03 '18 at 13:46
  • When you first run the code. it states `In development mode, there's no need to run the webpack build tool`. From the developer command prompt if I run your command it asks if I want to install the webpack-cli. I say yes. It then errors with `webpack-cli@2.0.13 requires a peer of webpack@^4.0.0 but none was installed`. The point is though, that it clearly states that I so not need to run the webpack build tool in dev mode. – bilpor Apr 03 '18 at 17:53
  • So I also need to explicitly install webpack and the webpack-cli first, then replace all references to vendor.css with bootstrap.css then run webpack config.......I'll give it a try tonight – bilpor Apr 04 '18 at 07:22
  • No. You just need to run this one command - I updated my answer with more details. – Pavel Agarkov Apr 04 '18 at 07:27
  • Thank you for this update (I'm new to webpack). I will try this tonight (personal project at home). – bilpor Apr 04 '18 at 07:34
  • I ran the node command from the cmd prompt changing the const line above to `const extractCSS = new ExtractTextPlugin('bootstrap.css');` and changing the stylesheet reference to bootstrap in place of the Vendor.css. The node command seemed to run without error, but it has made no difference. – bilpor Apr 04 '18 at 17:27
  • interestingly if I run the command from the package manager console. it errors stating that it cannot find the webpack.js file. This is because it's looking in `dirA\dirB\Node_Modules....` when it's in `dirA\dirB\dirC\Node_Modules......` So it looks to be pointing to the wrong location somehow – bilpor Apr 04 '18 at 18:08
  • I went back to basics to try and understand what's going on. I created a new project. updated as above and installed bootswatch into a folder called css in wwwroot. I then ran for the first time and it looks a though it may have picked up the new file. I noticed if I delete the `dist` folders in both wwwroot and ClientApp, clean the project and run, webpack builds it's manifests again from scratch. I'll do a little more playing around, to check it really has picked up the new css – bilpor Apr 05 '18 at 06:30
  • Finally there. I downloaded a bootwatch theme with the brightest colours. Placed it in wwwroot/css. commented out the overriding css in the css component referenced the bootstrap file inside _layout in place of Vendor.css. Deleted both dist folders, cleaned the project and let webpack do it's magic on a rebuild and voila bright theme appeared. – bilpor Apr 05 '18 at 14:02