0

我正在尝试使用带有引导程序的 Angular2/4 设置一个简单的项目。

我克隆了Angular-Webpack-Starter repo，删除了不再需要的东西，并根据链接https://github.com/AngularClass/angular-starter/wiki/How-to-use-Bootstrap-4添加了引导程序-and-Sass-(和-jQuery)

当我通过 启动服务器时npm run server，它正在正确编译。但是 css/scss 没有被加载。

正如您在下面的快照中看到的，css 没有被加载。 在此处输入图像描述

我在 HomeComponent 中使用以下 HTML

<div>
    <h1>HOME</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-6"> 1 of 2 </div>
            <div class="col-md-6"> 1 of 2 </div>
        </div>
        <div class="row">
            <div class="col-md-4"> 1 of 3 </div>
            <div class="col-md-4"> 1 of 3 </div>
            <div class="col-md-4"> 1 of 3 </div>
        </div>
    </div>
</div>

我在这里做错了什么？

4

2 回答 2

1

如果您正在谈论引导 css 文件，那么这些文件应该像这样包含在您的 index.html 文件中

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

也可以在项目根目录node_modules运行后引用文件夹中安装的bootstrap包npm install

但是，如果是组件的 css 没有被加载，那么尝试像这样将封装设置为 None 。当您加载组件的 css 时，它不会全局应用，但ViewEncapsulation.Nonemake 会使它们全局化。

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})

这回答了你的问题了吗？另外我建议使用 AngularCLI 工具，然后运行ng serve

于 2017-08-05T04:35:29.453 回答
0

下载种子应用程序后，您必须安装package.json中提到的所有节点包。要安装导航到根目录并运行命令

npm install

如果未安装引导程序，请安装依赖项并直接从您的目录中下载的 node_modules 引用依赖项

 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
于 2017-08-05T04:50:52.933 回答