Ionic 3 изменить переменную / тему во время сборки

Question

Мне нужно создать 2 темы в ionic 3. На самом деле мне просто нужно иметь 2 версии файла variables.scss.

Одна будет иметь один цветовой поддон, другой - те же самые переменные, но разные цвета.

Можно ли сказать ionic во время сборки, какую тему (variables.scss) использовать, или как-то изменить цветовой палитру во время сборки?

Answer 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"
 }

Я создал скрипты папок и добавил-файл 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 cordova build android --prod --release -- --theme.themeName