Ionic 3 在构建时更改变量/主题答案

【问题标题】：Ionic 3 change variable/theme in build timeIonic 3 在构建时更改变量/主题
【发布时间】：2019-07-01 18:57:55
【问题描述】：

我需要在 ionic 3 中创建 2 个主题。其实我只需要两个版本的 variables.scss 文件。

一个会有一个颜色托盘，另一个有相同的变量但颜色不同。

是否可以在构建时说 ionic 使用哪个主题（variables.scss），或者以某种方式在构建时更改调色板？

【问题讨论】：

标签： javascript ionic-framework sass

【解决方案1】：

我用离子构建钩子解决了这个问题。

参考：

https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/ https://ionicframework.com/docs/cli/configuration#hooks

在文件夹 '\src\theme' 中，我为我拥有的每个主题创建了一个文件夹。文件夹仅包含带有我需要的调色板的 variable.scss 文件。

在 ionic.config.json 我根据文档添加了钩子：

"hooks": {
    "serve:before": "./scripts/serve-build-before.js",
    "build:before": "./scripts/serve-build-before.js"
 }

我创建了文件夹脚本并添加了 serve-build-before.js 文件，每次构建过程开始时都会调用它：

module.exports = function(context) {
    const fs = require('fs');

    if (context && context.argv) {
        let theme;
        for (let i = 0; i < context.argv.length; i++) {
            let argument = context.argv[i]; 
            if (argument.indexOf('theme.') > -1) {
                theme = argument;
                break
            }   
        }

        theme = (theme) ? theme: 'theme.defaultTheme'; // default theme

        const themeName = theme.split('.')[1];
        fs.copyFileSync('src/theme/' + themeName + '/variables.scss', 'src/theme/variables.scss');
    }

};

此代码从构建参数中获取主题名称，主题名称与文件夹名称相同，这只是将 variable.scss 文件从主题文件夹复制到主 ionic 主题文件夹。

自定义构建过程参数（在本例中为主题）应该像这样发送：

ionic cordova build android --prod --release -- --theme.themeName

【讨论】：

也适用于 Ionic 5.410、Ionic Angular 4.11.1。我正在寻找一种在不使用环境的情况下自定义主题的方法。环境是 dev、test、preprod、prod，而主题是特定客户端的包装（每个客户端的移动应用程序都有自己的主题）。