Angular v8如何将第三方样式添加到组件中。

Question

我的Angular组件如下：

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css']
})

在使用angular-cli编译时，我遇到了错误:

模块未找到: 错误: 无法解析'./https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'

模块未找到: 错误: 无法解析'./https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'

如何解决这个问题？

- A. Gladkiy

---

@DanielB很抱歉，我也有相同的错误。 - A. Gladkiy

Answer 1

只需像这样导入您的组件 .scss .css 文件

@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";

如果您为每个导入创建一个文件，然后像这样导入。

  @Component...
  styleUrls: ['./hello.component.scss',
          '../../assets/bs4.css',]

这个链接https://stackblitz.com/edit/angular-bs4-from-assets中可以运行

- errorau

---

我只需要为我的一个组件编写样式，而不是整个应用程序。 - A. Gladkiy

我已更新并测试通过。 - errorau

你的意思是将这些代码添加到component.scss文件中吗？如果是的话，那么它会将样式添加为全局。 - A. Gladkiy

只需将项目主页组件样式文件添加即可。 - errorau

让我们在聊天中继续这个讨论。 - errorau

Answer 2

最好的方法是安装这个js和CSS，这是正确的方式

使用这些命令来安装bootstrap和fontawesome

npm i bootstrap
npm i font-awesome
// For angular font awesome use
npm i angular-font-awesome

然后在angular.json文件中添加样式和脚本链接

- Hitech Hitesh

---

我只需要为我的一个组件编写样式，而不是整个应用程序。 - A. Gladkiy

Answer 3

在构建单页应用程序时，目标是尽可能减小其大小，将整个库导入组件并不是做法...... 为了使用 Font Awesome，您需要使用以下 Angular FontAwesome library 它支持导入和树摇。

为了使用 Bootstrap 4，您不需要最小版本 - 您需要 SASS 文件，因此，您需要： 1. 将其安装为 package 2. 在全局样式中导入 bootstrap，我使用变量来导入：

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

在全局 styles.scss 中导入

@import '~bootstrap/scss/bootstrap-grid.scss';
@import 'variables.scss'

- Timothy