在Angular 4中使用Bootstrap 4

问题描述：

我想知道为什么我需要在Angular的styles.css中导入我的引导文件。你是否真的需要这样做让Bootstrap 4在Angular 4中工作？我尝试不将它导入到styles.css中，它不起作用，但它在我导入它时起作用。不像bootstrap 3，你不需要将它导入到styles.css中，只需声明它的angular.cli.json就行了。在Angular 4中使用Bootstrap 4

//styles.css 
@import "~bootstrap/dist/css/bootstrap.min.css"; 



//.angular.cli.json 
"styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
    "styles.css" 
    ], 
    "scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/tether/dist/js/tether.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.js" 
    ],

答

当您指定的全局样式像

"styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
    "styles.css" 
    ],

结果文件styles.bundle.js获取生成并注入index.html像

<script type="text/javascript" src="styles.bundle.js"></script>

然后，如果你有任何问题与全球风格，如styles is missing你需要检查文件styles.bundle.js，看看你的款式是否真的被放入。他们可能错失的原因之一是因为路径错误，它在你的情况下接缝非常正确。

如果你仍然坚持，你需要确保你的浏览器没有从缓存中加载任何东西，只需按ctrl+f5或清理缓存或打开隐身窗口，以确保什么都没有从缓存中加载。

在Angular 4中使用Bootstrap 4

相关推荐