Как импортировать как css npm модуль в Ember - PullRequest
Новая
       6

Как импортировать как css npm модуль в Ember

1 голос
/ 13 февраля 2020

Как мне правильно импортировать не подключаемый модуль npm в Ember?

Я пытаюсь использовать sass-версию flag-icon-css с ember-cli, чтобы sass создается во время развертывания с остальной частью ember-cli-sass, но я не могу понять, как это сделать в автоматическом режиме (например, без ручного копирования файлов в public).

Использование ember-auto-import кажется хорошим началом для начала, но оно больше ориентировано на javascript импорт.

Я пробовал эту конфигурацию в ember-cli-build.js: 

    'sassOptions': {
        includePaths: [
            'node_modules/flag-icon-css/sass' // flag-icon.scss
        ]
    },

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

Я прочитал эту документацию , но не указывает что-то более сложное, чем один файл.

Ответы [ 2 ]

4 голосов
/ 13 февраля 2020

Просто используйте ember-cli-sass:

  1. сначала добавьте его к includePaths в вашем ember-cli-build.js
new EmberApp({
  sassOptions: {
    includePaths: [
      'node_modules/flag-icon-css/sass'
    ]
  }
});
используйте его с @import "flag-icon";

Загляните в readme .

сейчас, пока это успешно добавит скомпилированный вывод sass к вашему /assets/app-name.js нет автоматического способа добавить какие-либо активы в вашу папку dist.

В случае flag-icon-css он просто добавит background-image: url(../flags/4x3/gr.svg); к вашему dist/assets/app-name.css, но не добавит svg сама. Вы можете сделать это вручную с брокколи Funnel и MergeTrees:

  1. установить broccoli-funnnel и broccoli-merge-trees
  2. импортировать их в ember-cli-build.js: 
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');
используйте их, заменив return app.toTree() в вашем ember-cli-build.js на 
const flagIcons = Funnel('node_modules/flag-icon-css', { include: ['flags/**/*'] });
return new MergeTrees([app.toTree(), flagIcons]);

, чтобы весь ваш ember-cli-build.js мог выглядеть так: 

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: [
        'node_modules/flag-icon-css/sass'
      ]
    }
  });

  const flagIcons = Funnel('node_modules/flag-icon-css', { include: ['flags/**/*'] });
  return new MergeTrees([app.toTree(), flagIcons]);
};

короткая заметка: я бы обычно рекомендовал помещать ресурсы в папку assets вашего вывода, но в этом случае это не сработает, поскольку flag-icon-css ожидает, что папка flags находится в родительский каталог .css.

2 голосов
/ 14 февраля 2020

Я понял это, но я не уверен, что это лучший или самый простой способ. У него есть некоторые недостатки. 

const EmberApp = require('ember-cli/lib/broccoli/ember-app')
const Funnel = require('broccoli-funnel')

module.exports = function(defaults) {
    const app = new EmberApp(defaults, {
        'sassOptions': {
            includePaths: [
                'node_modules/flag-icon-css/sass'
            ]
        }
    })

    const flags = new Funnel('node_modules/flag-icon-css/', {
        srcDir: 'flags',
        destDir: '/flags',
    })

    return app.toTree([flags])
}

Недостатком является то, что css URL-адреса изображения не обрабатываются и жестко связаны с ../flags, поэтому у меня есть для их направления в /flags, что не является соглашением, поскольку эти активы должны быть скомпилированы в public/assets/images.

Это двухэтапная реализация (или несколько шагов, если модуль npm будет более сложным). Было бы предпочтительнее включить только scss и иметь Ember (плагин) для автоматического извлечения зависимых ресурсов.

...