如何将scss npm模块导入Ember

如何将非插件npm模块正确导入Ember

我正在尝试将的sass版本与

ember cli

一起使用，以便在部署

ember cli sass

的其余部分时构建sass，但我不知道如何以自动化的方式实现这一点（例如，无需手动将文件复制到

public

）

使用似乎是一个很好的开始，但它更适合javascript导入

我在

ember cli build.js中尝试了此配置：

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

它将添加样式，但不包括样式中使用的图像

我已经读过了，但它没有指定比单个文件更复杂的内容。
只需使用
ember cli sass
：

首先将其添加到
ember cli build.js中的
includePaths

与
@import“标志图标”一起使用

看一看报纸

现在，虽然这将成功地将编译后的sass输出添加到您的
/assets/app name.js
中，但没有自动的方法将任何类型的资产添加到您的
dist
文件夹中

在
标志图标css
的情况下，它只会添加
背景图像：url（../flags/4x3/gr.svg）
到您的
dist/assets/app name.css
，但不要添加
svg
本身。您可以手动使用花椰菜
漏斗
和
合并树
：

安装花椰菜漏斗和花椰菜合并树
将它们导入到
ember cli build.js
：
通过将
ember cli build.js
中的
return app.toTree（）
替换为

因此，您的整个
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]);
};


一个简短的旁注：我通常会建议将资产放入输出的
资产
文件夹中，但在这种情况下，这不起作用，因为
标志图标css
希望
标志
文件夹位于
.css
的父目录中，但我不确定这是最好还是最简单的方法。它有一些缺点

const-EmberApp=require（'ember-cli/lib/brocoli/ember-app'）
const漏斗=需要（“花椰菜漏斗”）
module.exports=函数（默认值）{
const app=新应用程序（默认值{
“sassOptions”：{
包括道路：[
'节点\模块/标志图标css/sass'
]
}
})
const flags=新漏斗（'node_modules/flag icon css/'{
srcDir:'标志'，
destDir:“/flags”，
})
return app.toTree（[标志]）
}

缺点是css图像URL没有经过处理，并且硬链接到
。/flags
，因此我必须将它们导入
/flags
，这不是惯例，因为这些资产应该编译成
公共/资产/图像

这是一个两步实现（如果npm模块更复杂，则需要更多步骤）。最好只包含
scs
，并让（一个）Ember（插件）自动获取相关资源。
我已经尝试过了（还有
autoImport.webpack
），但是我没有得到相关的（在这个特定的例子中是“标志”）图像，只有样式。我将把它编辑成问题。
MergeTrees
不再需要了。我把最后的答案贴在下面。我会接受你的，因为你花时间帮助我，让我走上正轨。谢谢。这可能是最好的解决办法。我不确定是否有任何东西可以自动解析
css/sass
中的所有URL。
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');

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

'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]);
};