Ionic3:从node_modules导入css的最佳方法

Question

我想从全日历包中导入.css .

首先,我创建了一个新组件my-calendar(html,scss,ts).

然后,我尝试了3种不同的方式,但只有最后一种方式适合我:

1. 如文档所示,在index.html中直接引用该文件(它不起作用,因为在构建项目时对node_modules的引用会丢失)

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

2. 添加@import "~fullcalendar/dist/fullcalendar.min.css";在我-calendar.scss.如果我没有错,这应该 在构建项目时将样式添加到main.css中(不起作用)

3. 创建自定义副本配置(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
以避免编译器错误时使用离子构建--aot --minifycss --minifyjs

如果有人能澄清最好的方法并解释我是否误解了某些概念,我将不胜感激.

PS:请记住我正在使用Ionic3而我没有使用Angular CLI.

Answer 1

你的第三种方法将是最好的实现方式,但它可以用更像离子的另一种方式完成.您需要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中提出了一个问题但不幸的是他们以下列理由结束了这个问题

配置已扩展,因此仅包括您正在更改的字段.其他所有内容都将继承默认值.