带有bootstrap scss的Angular2 / 4（Angular webpack starter）

Question

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

我克隆了Angular-Webpack-Starter仓库，删除了不再需要的东西，并根据链接添加了引导程序https://github.com/AngularClass/angular-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-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>

我在这里做错了什么？

Answer 1

如果您正在讨论bootstrap 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之后，您还可以引用npm install文件夹中安装的引导程序包

但是，如果它是一个没有加载的组件的css，那么尝试将封装设置为None，就像这样。加载组件的css时，它不会全局应用，但制作ViewEncapsulation.None会使它们成为全局。

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

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

Answer 2

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

npm install

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

 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>