除了 VS2017 中的 Angular 模板附带的 vendor.css 文件，我如何引用不同的 css 文件

Question

好的，我已经下载了最新版本的 bootswatch 模板，并将其命名为 bootstrap.css。我将其复制到 wwwroot/dist 文件夹中。然后使用 NPM

我已将 bootstrap 升级到版本 4
安装了很棒的字体
已安装 bootswatch 版本 4

在 ClientApp/app/components/navmenu 文件夹中，我将 namvmenu.component.html 文件调整为菜单我想要，现在我已经将 navmenu.component.css 文件中的 css 设为空白。 _Layout.cshtml 页面仍然引用了 vendor.css 文件。如果我简单地用 bootstrap.css 替换它，一切都会出错。我怀疑这需要保留，但我只需要在 bootstrap.css 的地方覆盖它，但我不知道在哪里。我现在设法让我的菜单位于页面顶部水平。如何让我的组件引用我从 bootswatch 下载的 bootstrap.css 文件？

这是 webpack.config.vendor.js 文件中的代码片段：

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');

这是我 _layout.cshtml

的头部部分中的当前代码行

<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" /> 用 bootstrap.css 替换它会完全弄乱布局，即使我在 webpack 文件

中分配 const 值时将 vendor.css 更改为 bootstrap.css

Answer 1

您需要使用 webpack --config webpack.config.vendor.js

重建供应商资产

如果您没有全局安装正确版本的 webpack cli，那么您可以运行手动使用 *.csproj 文件中存在的相同命令：
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

此命令仅自动执行一次运行s - 当您第一次在开发中构建项目时，由于以下条件：
Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') "

所以你也可以只删除这个文件夹并重建项目。

除了 VS2017 中的 Angular 模板附带的 vendor.css 文件，我如何引用不同的 css 文件

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

bootswatch

asp.net-core-2.0

angular