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"; 在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
使用離子構建時避免編譯器錯誤--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中提出了一個問題但不幸的是他們以下列理由結束了這個問題

配置已擴展，因此僅包括您正在更改的字段。 其他所有內容都將繼承默認值。

Answer 2

從@ ionic / app-scripts：3.2.0開始，你似乎還需要@include FILE; 某處 在應用程序腳本的github上看到這個已關閉的問題

我發現，從“Ionic Framework：ionic-angular 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 */