如何在Angular组件的CSS中使用第三方CSS库而不复制该库？
在Angular组件的CSS中使用第三方CSS库而不复制该库，可以通过以下步骤实现：
- 安装第三方CSS库：首先，使用npm或yarn等包管理工具安装所需的第三方CSS库。例如，如果要使用Bootstrap，可以运行以下命令安装它：
- 安装第三方CSS库：首先，使用npm或yarn等包管理工具安装所需的第三方CSS库。例如，如果要使用Bootstrap，可以运行以下命令安装它：
- 在angular.json中引入CSS文件：打开angular.json文件，找到"styles"数组，并将第三方CSS库的路径添加到该数组中。例如，如果使用的是Bootstrap，可以添加以下内容：
- 在angular.json中引入CSS文件：打开angular.json文件，找到"styles"数组，并将第三方CSS库的路径添加到该数组中。例如，如果使用的是Bootstrap，可以添加以下内容：
- 这样，Angular将会自动加载并应用该CSS文件。
- 在组件中使用第三方CSS类：在需要使用第三方CSS类的组件的CSS文件中，直接使用该类即可。例如，如果要在某个组件中使用Bootstrap的样式，可以在该组件的CSS文件中添加以下内容：
- 在组件中使用第三方CSS类：在需要使用第三方CSS类的组件的CSS文件中，直接使用该类即可。例如，如果要在某个组件中使用Bootstrap的样式，可以在该组件的CSS文件中添加以下内容：
- 这样，该组件将应用自定义的样式，并且可以使用Bootstrap的CSS类。
需要注意的是，以上步骤假设第三方CSS库已经正确安装，并且库的路径正确指定。另外，如果第三方CSS库依赖其他资源（如字体文件、图标等），还需要相应地配置和加载这些资源。
推荐的腾讯云相关产品：腾讯云CDN（内容分发网络）可以帮助加速静态资源的分发，提高网站的访问速度和用户体验。您可以通过以下链接了解腾讯云CDN的详细信息和使用方法：腾讯云CDN产品介绍
请注意，本回答仅供参考，具体的实现方式可能会因项目配置和需求而有所不同。
相关·内容
在angular.json文件中，如果我添加
"styles": [
"src/styles.css",
"src/utility/vendor/bootstrap/css/bootstrap.css",
"src/utility/vendor/font-awesome/css/fontawesome-all.min.css",
"src/utility/vendor/animate.css/animate.min.css",
"src/utility/vendor/slick-caro
浏览 0提问于2018-08-03得票数 9
回答已采纳
我用cli建立了一个新的角度项目
ng new memmory-game
我想使用引导，因为我知道引导5已经放弃了jQuery依赖，所以我选择不使用类似于的东西
通过npm和popperjs安装的引导程序
这是我的package.json文件，您可以看到我的依赖项。
"dependencies": {
"@angular/animations": "~13.3.0",
"@angular/common": "~13.3.0",
"@angular/compiler": &
浏览 4提问于2022-05-16得票数 0
回答已采纳
1回答
我使用Angular Elements (6.0.3)创建了一个web组件。当我在另一个网站中使用web组件时，该web组件会覆盖父页面的样式，因为它也使用Bootstrap。我知道有视图封装原则，但据我所知，“原生”封装是。所以现在我使用的是默认的“已仿真”。
我发现如果我在我的样式前面添加:host ::ng-deep，它们只应用于web组件本身，这很棒。但是，我在angular.json中加载的所有css和scss文件似乎也覆盖了父页面。有没有办法从导入的样式文件中防止这种行为？
我的风格-在angular.json中导入：
"styles": [
"node
浏览 0提问于2018-06-29得票数 2
我有一个角形6应用程序使用引导4和一个Bootswatch主题()。当我使用ng serve在测试环境中编译站点时，样式和主题工作得很好，在用ng build编译nginx时也可以很好地工作。但是，在为when服务器编译生产模式(ng build --prod)时，基本的引导样式可以工作，但是Bootswatch主题显然没有加载或无效。这个网站看起来像普通的香草靴带4。
我使用角CLI的安装过程是：
npm install --save bootstrap
npm install --save @ng-boostrap/ng-bootstrap
npm install bootswatch
我
浏览 0提问于2018-06-27得票数 2
回答已采纳
5回答
不能在角6中添加引导带4
、、、、
当我尝试添加最新的引导版本时，我遇到了问题
npm install bootstrap
在那之后，当我试图运行它时，我得到了一条错误消息。
ng serve --open
我在angular.json中添加了引导程序
像这样
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
错误信息是
ERROR in multi ../node_modules/bootst
浏览 0提问于2018-05-16得票数 3
回答已采纳
在我部署之前，我的Angular项目在Bootstrap 3.3.7 (我的项目所需的)中工作得很好。Bootstrap没有被识别，所以我回去调整我的项目中的一些文件，现在Bootstrap在我的本地环境中不再工作。我已经为这个问题绞尽脑汁两天了，似乎找不到解决方案。 My angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "/&#
浏览 26提问于2019-01-08得票数 1
2回答
在角项目上安装引导程序
、、、
嗨，我的机器里有最新的棱镜。我试着在上安装引导程序。以下是我所遵循的步骤。
吴氏新演示
npm安装引导jquery --保存
然后在下面复制的angular.json文件中打开vs代码中的项目。
"styles.css“、”styles.css“、”脚本“：”./node_node/jquery/dist/jquery.min.js“，"../node_modules/bootstrap/dist/js/bootstrap.js”
在此之后，我运行的项目ng服务，我得到了这个错误消息。
正在侦听localhost: 4200，在上打开浏览器** 91%额外
浏览 1提问于2018-05-10得票数 3
回答已采纳
我已经下载并导入了angular.json文件中的bootstrap，在网页上也导入了相同的内容，但是bootstrap类不起作用。
使用: npm install --save bootstrap@3，
导入到angular，使用方式
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
该网页还在样式标签中显示了bootstrap的导入，但仍然不起作用。
还需要做些什么？
浏览 3提问于2020-02-11得票数 0
当我尝试推送到Heroku时，我得到了一个错误，它不允许我将我的应用程序推送到Heroku。
我已经多次尝试更改angular.json文件中的路径，但似乎都不起作用。
这是我的angular.json的一部分
"assets": [
"src/assets/favicon.png",
"src/assets"
],
"styles": [
"node_modules/font-awesome
浏览 10提问于2019-08-07得票数 0
我在angular-cli.json样式中添加了引导css。未将引导程序样式应用于我的项目。我添加了package.json并安装了npm。如何解决这个问题？
angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
]
package.json
"dependencies": {
"bootstrap&#
浏览 2提问于2017-12-20得票数 7
1回答
我已经下载并安装了NPM软件包，但我无法访问已安装软件包的css。我在用 package.can有人帮我吗？根据文档，我需要添加以下css文件。
<link rel="stylesheet" href="css/grid.css" /><!-- Opt-in Default Grid -->
<link rel="stylesheet" href="css/bootstrap4-scoped.css" /><!-- Optional scoped version of Bootstra
浏览 2提问于2019-12-05得票数 0
回答已采纳
5回答
我正在使用引导4的角度应用程序工作。
我需要帮助与scss添加在我的角度应用程序。
我的问题是：
是在角6和角7中添加引导4 scss的方法？。
即
npm install bootstrap --save
，打开angular.json文件并将引导文件路径添加到样式部分。喜欢：
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
是上述方式是相同的两个版本的角度。
浏览 1提问于2019-02-15得票数 16
回答已采纳
我试图在我的角度项目中安装引导程序。
我使用jqueryProvided 在项目中安装引导程序，之后我为引导安装了npm install --save bootstrap路径。
下面是angular.json文件：
"styles": [
"../node_modules/boostrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"../node_modul
浏览 5提问于2022-10-25得票数 0
回答已采纳
6回答
我将跟随本教程：
我刚用cli做了一个新的角度计划。包括路由，scss样式表。
我执行了npm安装引导jquery，并将它们包括如下：
angular.json
"projects": {
"myproject": {
...,
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...,
浏览 0提问于2019-03-27得票数 0
回答已采纳
所以我找到了一个非常好的模板，我想使用它，但它只是使用bootstrap的HTML。我找到了一些关于如何转换类似项目的教程，看起来非常简单(比如here)。 我添加了第一个组件和头部显示，如下所示(我注释掉了大多数链接标记，但只有一个链接标记可以同时使用)： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Some Html Template</title>
<meta name="viewpor
浏览 24提问于2020-08-05得票数 1
我的第一步是使用angular 2，特别是我使用angular-cli官方工具来创建新项目。
我用这种方式创建了一个新项目
ng new [my-project-name]
项目创建正确。
之后，我想安装bootstrap 4，并按照angular-cli页面中的官方指南进行操作。
使用npm安装bootstrap：
npm install bootstrap@next
我在angular-cli.json中添加了这一行：
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node
浏览 4提问于2016-09-12得票数 8
我想在我的Angular项目中使用bootstrap。为此，我使用以下命令安装了Bootstrap：npm install bootstrap，并添加了以下引用：
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
在angular.json文件的styles属性中。
之后，我尝试运行我的应用程序，但在组件上，我没有看到Bootstrap应用于模板：
<div>
<!-- Actual search box -->
<div cla
浏览 33提问于2020-07-29得票数 0
20回答
我开始学习角质，我正在学习一个教程。我试着将代码放在导航栏的教程中：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Recipe book</a>
</div>
<div class
浏览 1提问于2018-10-06得票数 38
回答已采纳
我已经安装并更新了最新版本的角和节点
Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package
浏览 0提问于2018-05-05得票数 4
回答已采纳
在我的角度应用程序中，只有一个组件使用handsontable，因此css不必是application level.In --我尝试使用如下语法的组件：
styleUrls: ['./../../../node_modules/handsontable-pro/dist/handsontable.full.min.css']
但是它没有effect.Finally，我必须将handsontable.full.min.css复制在与组件的文件夹相同的文件夹中--引用styleUrls如下所示：
styleUrls: ['./handsontable.full.min.cs
浏览 2提问于2020-07-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
