Use third-party CSS with Ionic

Question

I am currently porting one of my Cordova + Angular2 projects to Ionic 3.8+ Angular 4.1.3. My project uses several JS and CSS libraries of the third part, such as Font awesome, Slick carousel, etc. In the previous version, I used webpack to package my application, and below is how I managed third-party css and JS.

.angular-cli.json

"styles": [
    "styles.css",
    "css/animate.css",
    "css/font-awesome.css",
    "css/slick.css",
    "css/slick-theme.css"
  ],
  "scripts": [
    "scripts/jquery-3.2.1.min.js",
    "scripts/slick.min.js",
    "scripts/slideout.min.js"
  ],

How to achieve the same result using ionic? I took advantage of the solutions available on the Internet, but most of them recommend combining css with a global scss file, or even configure ionic ones. Is there a direct solution for this, as with angular cli?

Answer 1

Ionic 3 , Ionic App Scripts. index.html Duannx .

: Ionic v4 Ionic , CSS, , angular.json. v4 .

---

Ionic v3, CSS npm, :

npm install slick-carousel

1. sass.config.js Ionic App.

node_modules/@ionic/app-scripts/config sass.config.js. . : CSS includePaths, , slick-carousel node_module:

includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/slick-carousel/slick'
  ],

2. sass.config.js package.json

SASS package.json. readme App Scripts. :

"config": {
    "ionic_sass": "./sass.config.js"
  }

, sass.config.js . , .

3. CSS , @import

CSS @import. - variables.scss.

: . . , , , copy.config.js copyFonts.