SASS：如何在构建前替换导入（Ember 项目）

Question

我有Ember JS项目和主scss文件（app.scss），我有一个ENV变量（STYLE_NAME）。

我需要替换 app.scss 的内容粘贴 @import 'STYLE_NAME'; 其中 STYLE_NAME - 是来自 process.env.STYLE_NAME;[ 的字符串=18=]

我在同一文件夹中有很多 STYLE_NAME 个 scss 文件。

因此，通过执行控制台命令 env STYLE_NAME=theme1 ember build，我需要得到 app.scss 包含以下内容：

...
...
...

@import 'theme1';
@import 'main'; // this import is always the last one

Answer 1

如果我需要在我自己的应用程序中执行此操作，我会避免将导入名称设为动态。

您的 .scss 文件只是：

@import 'theme';
@import 'main'; // this import is always the last one

然后在 ember-cli-build.js 文件中，使用 process.env.STYLE_NAME 从正确的目录中获取主题。

'use strict';

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

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    sassOptions: {
      includePaths: [
        `vendor/${process.env.STYLE_NAME}/theme`
      ]
    }
  });

  return app.toTree();
};

所以最后，每个“品牌”都会在某处获得自己的目录（我随意选择了 vendor 作为示例）。然后当运行 / building 时，你做类似 STYLE_NAME='brand1' ember s 的事情并且包含正确的文件。然后，您只需确保每个主题目录都遵循相同的结构。

如果由于某种原因这对您不起作用，您可以查看 broccoli-funnel 以获取动态内容，包括构建期间所需的文件。

SASS：如何在构建前替换导入（Ember 项目）

SASS: How to substitute imports before build (Ember project)

sass

ember.js

npm-scripts