在 ionic 3 中导入样式表

Question

所以我正在尝试在我的 ionic 3 项目中使用这个 angular 2 组件来验证国际电话号码。

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

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

但是，我的 ionic 项目没有 (angular-cli.json)，所以我在 app.scss 中导入了所需的样式表 (intl-tel-input.css)

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

任何人我怎么能通过这个？

Answer 1

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

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

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 它成功。