Angular中使用bootstrap样式
<h2 id="angular中使用bootstrap样式">Angular中使用bootstrap样式</h2><h3 id="angular中引入bootstrap的方法">Angular中引入bootstrap的方法</h3>
<p> <br>
<strong>方法1：在<code>Angular.json</code>中的<code>styles</code>数组中添加<code>bootstrap</code>路径</strong><br>
如下所示：</p>
<pre><code>"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
]
</code></pre>
<p>这里需要注意路径问题，不同Angular版本下，Angular.json的位置可能有所不同，因此对应的路径也有可能需要作出修改。</p>
<p> <br>
<strong>方法2:通过在<code>styles.css</code>中使用<code>@import</code> 进行引入。</strong><br>
由于<code>styles.css</code>是整个项目的全局样式，因此可以在这里通过@import直接引入，也能够全局生效，这里同样需要注意路径问题。<br>
路径中不需要带<code>node_modules</code></p>
<pre><code>@importurl('bootstrap/dist/css/bootstrap.min.css')
</code></pre>
<p> </p>
<h3 id="angular中引入bootstrap不生效的解决办法">Angular中引入bootstrap不生效的解决办法</h3>
<p>在进行Angular开发时，使用了bootstrap样式。发现bootstrap的样式无法生效。引用方式如下：<br>
在<code>Angular.json</code>中修改<code>styles</code>数组，</p>
<pre><code>"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
]
</code></pre>
<p>仔细检查路径后发现没有问题，但是样式总是无法生效。查看控制台发现元素没有bootstrap的样式。说明bootstrap没有生效。然后在node_module中查找发现存在两个跟bootstrap相关的文件，其中一个是我们引用的bootstrap，另外一个是带下划线和@版本的bootstrap。</p>
<pre><code>_bootstrap@4.3.1@bootstrap/dist/css/bootstrap.min.css
</code></pre>
<p>这个文件里面具有各种css样式设置。因此，我们尝试了将这个文件进行了引入。</p>
<pre><code>"styles": [
"src/styles.css",
"./node_modules/_bootstrap@4.3.1@bootstrap/dist/css/bootstrap.min.css"
]
</code></pre>
<p>最后发现bootstrap样式果然生效了。通过在网上查找发现：<strong>原来使用淘宝的cnpm进行模块安装时，最终带下划线带@符号的才是模块文件，其他的文件夹只是模块文件的快捷方式。</strong>所以我们如果要引用第三方模块，必须引入带下划线的模块，而不能使用快捷方式。</p>
<p>参考文章：<br>
angular6使用angular-cli构建项目，引用bootstrap样式无效</p><br><br>
来源：https://www.cnblogs.com/yinhaiying/p/11180025.html
頁:
[1]