How do I reference a different css file aside from the vendor.css file that comes with the Angular Template in VS2017

Question

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

Are you using angular-cli? If so why not use its script array and list the files in order ? — salah-1
no, I'm not.it's the Angular template straight out of the box (Angular 5 and .Net Core 2.0) — bilpor

Pavel Agarkov Pavel Agarkov · Accepted Answer · 2018-04-02T21:08:47

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.

How do I reference a different css file aside from the vendor.css file that comes with the Angular Template in VS2017

1 Answers