ember.js SASS:如何在构建前替换导入(Ember项目)

9wbgstp7  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(173)

我有Ember JS项目和主scss文件(app.scss),我有一个ENV变量(STYLE_NAME)。
我需要替换 app.scss 粘贴@import 'STYLE_NAME';的内容,其中STYLE_NAME-是process.env.STYLE_NAME;中的字符串
我有很多的STYLE_NAME scss文件在同一个文件夹。
因此,通过执行控制台命令env STYLE_NAME=theme1 ember build,我需要获得包含以下内容的 app.scss

...
...
...

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

qacovj5a1#

如果我需要在自己的应用程序中这样做,我会避免将导入名称设置为动态。
您的.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();
};

所以最后,每个“brand”都会在某个地方得到自己的目录(我随意选择了vendor作为例子)。然后在运行/ building时,执行类似于STYLE_NAME='brand1' ember s的操作,并包含正确的文件。然后,确保每个主题目录都遵循相同的结构。
如果由于某种原因这对您不起作用,您可以查看broccoli-funnel for dynamic,其中包括您在构建时需要的文件。

相关问题