Ionic3：从 node_modules 导入 css 的最佳方式

Posted 2023-03-06

【中文标题】Ionic3：从 node_modules 导入 css 的最佳方式

【英文标题】：Ionic3 : the best way to import css from node_modules

【发布时间】：2018-03-14 08:50:03

【问题描述】：

我正在尝试从 full-calendar 包中导入 .css。

首先，我创建了一个新组件my-calendar（html、scss、ts）。

然后，我尝试了 3 种不同的方法，但只有最后一种对我有用：

按照文档的建议，在 index.html 中直接引用该文件（它不起作用，因为在构建项目时对 node_modules 的引用丢失了）

<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">

在 my-calendar.scss 中添加 @import "~fullcalendar/dist/fullcalendar.min.css";。如果我没记错的话，这应该在构建项目时将样式添加到 main.css 中（不工作）

创建自定义副本配置 (copy.config.js)

module.exports =    
  ...   
  copyFullCalendar:     
    src: ['ROOT/node_modules/fullcalendar/dist/fullcalendar.min.css'],    
    dest: 'BUILD'    
  

并添加@import "fullcalendar.min.css";进入 my-calendar.scss

更新： 并将@import "fullcalendar"; 添加到 my-calendar.scss 在使用 ionic build --aot --minifycss --minifyjs

时避免编译器错误

如果有人能澄清最佳方法并解释我是否误解了某些概念，我将不胜感激。

PS：请记住，我正在使用 Ionic3，而不是使用 Angular CLI。

【参考方案1】：

从 @ionic/app-scripts : 3.2.0 开始，您似乎仍然需要 @include FILE; 某处 看到这个closed issue on app script's github

我发现 '离子框架：离子角 3.9.2' 您有两个选择将您的导入插入 src/theme/variables.scss 或 src/app/app.scss。

例如在 variables.scss 中

/* some declarations here */
@import 'insrctest';/*file sits in src/test/insrctest.scss*/

在我的 custom.config.js 中

includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */

【参考方案2】：

你的第三种方法将是最好的实现方式，但它可以用另一种更像离子的方式来完成。 您需要在配置自定义路径时使用includePaths，因为我们正在处理自定义css，将sass.config.js添加到我们配置自定义includePaths的本地项目文件夹中

includePaths: [
    ....
    'node_modules/ap-angular2-fullcalendar'
 ],

在 package.json 脚本中包含自定义 css 配置文件，如下所示：

"scripts": 
    .....
    "ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
 ,

这个实现的唯一问题是当您更新ionic-app-scripts 时，您必须将本机sass.config.js 文件与本地文件进行比较，并检查是否有任何更改。

这是一个麻烦的方法，在Github 中提出了一个问题，但不幸的是，他们以以下理由关闭了该问题

配置已扩展，因此仅包含您要更改的字段。 其他一切都将继承默认值。