web-dev-qa-db-ja.com

Ionic3：node_modulesからCSSをインポートする最良の方法

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. my-calendar.scssに@import "~fullcalendar/dist/fullcalendar.min.css";を追加します。私が間違っていない場合、プロジェクトのビルド中にmain.cssにスタイルを追加する必要があります（動作していません）

  3. カスタムコピー設定の作成（copy.config.js）

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

    @import "fullcalendar.min.css"を追加します; intomy-calendar.scss

UPDATE：
そして@import "fullcalendar";をmy-calendar.scssに追加
使用時のコンパイラエラーを回避するためにionic build --aot --minifycss --minifyjs

誰かが最良の方法を明確にし、いくつかの概念を誤解した場合は説明していただければ幸いです。

PS：私はIonic3で作業しており、Angular CLI。

cssangularionic-frameworkimportionic3
17
Mario Padilla

あなたの3番目の方法は実装する最良の方法ですが、それはイオンのような別の方法で行うことができます。カスタムパスを設定するときは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 で問題が発生しましたが、残念ながら次の理由で問題を解決しました

構成は拡張されるため、変更するフィールドのみを含めます。それ以外はすべてデフォルトを継承します。

7
Webruster

@ ionic/app-scripts：3.2.0の時点では、@include FILE;somewhereこれを参照してください アプリスクリプトのgithubで解決済みの問題

「Ionic Framework：ionic-angular 3.9.2」の時点で、src/theme/variables.scssまたはsrc/app/app.scssにインポートを挿入する2つの選択肢があることがわかりました。

たとえば、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 */
1
radek79