Ionic3: лучший способ импортировать css из node_modules

Я пытаюсь импортировать.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"; в мой календарь.scss

ОБНОВИТЬ:
и добавление @import "fullcalendar"; в мой календарь.scss
во избежание ошибок компилятора при использовании ионной сборки --aot --minifycss --minifyjs

Я был бы признателен, если бы кто-нибудь мог прояснить лучший способ и объяснить, если я неправильно понял какую-то концепцию.

PS: Помните, что я работаю с Ionic3, и я не использую Angular CLI.

Ответы

Ответ 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 ionic-app-scripts вы должны сравнить файл sass.config.js с родным файлом с локальным файлом и проверить, что что-то изменилось.

Это хлопотный метод, и проблема была поднята в Гитубе, но, к сожалению, они закрыли проблему со следующим обоснованием

Конфигурации расширены, поэтому включайте только те поля, которые вы меняете. Все остальное наследует значения по умолчанию.

Ответ 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.

Например, в переменных.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 */