Question

我使用Angular cli创建了一个Angular 2应用程序。

在index.html中，我指的是cdn上的bootstrap 3，它运行正常

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

现在，我不想使用cdn的bootstrap，而是使用本地副本。所以，我使用npm

安装了bootstrap

 npm install bootstrap@3

然后尝试在index.html文件中提供一个引用，该文件位于src内（与node_modules并行）

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

然而，这不起作用，我在浏览器控制台中看到以下内容（当我加载index.html时）

有人可以建议如何在本地加载bootstrap吗？

PS：我不想使用Bootstrap4，因为它仍处于alpha状态

Answer 1

在您的.angular-cli.json文件中有脚本＆amp;样式属性，接受一个字符串数组（您的npm包的相对路径）

这是您应该引用本地javascript和css / scss / less文件的地方。

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

在此处添加脚本，运行ng serve时，这些文件将在index.html文件中创建。

Angular-CLI是构建应用程序的绝佳选择，而且只会变得更好。

Answer 2

您应该将css文件复制到本地文件夹并允许加载

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

Answer 3

从..属性值中删除href：

href="/node_modules/bootstrap/dist/css/bootstrap.min.css"

另一个建议是看看/dist文件夹，如果你有webpack捆绑js和css与它的加载器。

如果您看到css文件夹，则只需：

href="/css/bootstrap.min.css"

或者如果它在根级别，那么您只需输入文件的名称：

href="/bootstrap.min.css"

Answer 4

为什么不用css加载器加载它并将其捆绑在其他东西中？

我有四个入口点文件来完成我的所有捆绑，其中一个叫做css-chunk.js。我通过webpack css loader要求我的所有css文件。

来自css-chunk.js的行：

要求（ '风格装载机CSS-装载机自举/ DIST / CSS / bootstrap.css！！'）;

来自webpack.config的加载器：

loaders: [
                ...,
                {
                    test: /\.css$/,
                    loaders: ['to-string-loader', 'css-loader']
                },
            ],

所有内容都捆绑在一起，你只需要在索引页面中包含CSS文件：

<script src="css.bundle.js"></script>

效果很好，我用这种方式部署了一些应用程序。

使用带有Angular的本地Bootstrap3

4 个答案: