Question

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

我将bootstrap升级到版本4
已安装font-awesome
安装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

的head部分中的当前代码行

<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

自动执行此命令只运行一次 - 当您第一次在dev中构建项目时，因为条件：
Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') "

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

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

1 个答案: