javascript - Ionic 3 在构建时更改变量/主题

Question

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

一个将有一个颜色调色板，另一个具有相同的变量但不同的颜色。

是否可以在构建时说 ionic 使用哪个主题(variables.scss)，或者以某种方式在构建时更改颜色托盘？

Answer 1

我用 ionic 构建 Hook 解决了这个问题。

引用:

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

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

在 ionic.config.json 中，我根据文档添加了钩子(Hook):

"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