css - ionic 3 : the best way to import css from node_modules

Question

我正在尝试从 full-calendar 导入 .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";在 my-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
在使用 ionic build --aot --minifycss --minifyjs

时避免编译器错误

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

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

Answer 1

你的第三种方法将是最好的实现方式，但它可以用另一种更像 ionic 的方式来完成。 配置自定义路径时需要使用 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 时，您必须将 native sass.config.js 文件与本地文件进行比较并检查是否有任何变化。

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

Configs are extended, so only include the fields that you're changing. Everything else will inherit the defaults.