导入离子3中的样式表

Question

所以我试图使用这个角度2组件来验证我的离子3项目中的国际电话号码。

https://github.com/webcat12345/ngx-intl-tel-input

我在上面链接的 read me 中说了以下所有内容。

然而，我的离子项目没有（angular-cli.json）所以我在app.scss中导入了所需的样式表（intl-tel-input.css）

但是，它似乎没有成功导入样式表..这些是以下图像中的以下错误

任何人如何通过这个？

Answer 1

您正尝试在运行时从node_modules导入。由于node_modules在运行时不存在，您必须将css文件放在assets/css文件夹中并从那里导入。

但我不确定你是否需要手动导入它。如果您在www/build/main.css中导入了组件模块，Webpack应自动将其捆绑到AppModule。

Answer 2

有两种方法可以导入Ionic中的自定义CSS：

1. 从远程URL导入
2. 从本地目录（文件夹）导入

从远程URL导入：

语法：

 @import url(CSS-URL)

示例：

  @import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');

从本地目录（文件夹）导入：

语法：

 @import url(CSS-FILE-PATH)

示例：

@import'../../ assets / css / myFile.scss';

问题，我在本地css导入过程中遇到了问题，我尝试导入myFile.css，但是它不起作用，然后将其重命名为myFile.scss，它可以成功工作。