ember.js 如何将scss npm模块导入Ember

f45qwnt8  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(130)

我如何正确地导入一个非插件npm模块到Ember?
我尝试将flag-icon-css的sass版本与ember-cli一起使用,以便在部署ember-cli-sass的其余部分时构建sass,但我不知道如何以自动方式完成此操作(例如,不手动将文件复制到public)。
使用ember-auto-import似乎是一个很好的开始,但它更适合于javascript导入。
我已经在ember-cli-build.js中尝试过此配置:

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

它将添加样式,但不包括样式中使用的图像。
我读过this documentation,但它没有指定比单个文件更复杂的内容。

qlvxas9a

qlvxas9a1#

只需使用ember-cli-sass
1.首先将其添加到ember-cli-build.js中的includePaths

new EmberApp({
  sassOptions: {
    includePaths: [
      'node_modules/flag-icon-css/sass'
    ]
  }
});

1.与@import "flag-icon";一起使用
请在自述文件中查看。
现在,虽然这将成功地将编译的sass输出添加到您的/assets/app-name.js,但没有自动的方法将任何类型的资产添加到您的dist文件夹。
对于flag-icon-css,它只会将background-image: url(../flags/4x3/gr.svg);添加到dist/assets/app-name.css中,而不会添加svg本身。你可以手动添加broccolis FunnelMergeTrees
1.安装broccoli-funnnelbroccoli-merge-trees
1.将它们导入到ember-cli-build.js中:

const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');

1.请将您的ember-cli-build.js中的return app.toTree()替换为

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文件夹位于.cssparent 目录中。

fdx2calv

fdx2calv2#

我想出来了,但我不确定这是不是最好或最简单的方法。它有一些缺点。

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(插件)自动获取依赖的资源。

相关问题