Nativescript Angular, меняющаяся тема - PullRequest
Новая
       10

Nativescript Angular, меняющаяся тема

0 голосов
/ 08 апреля 2019

Я создаю приложение NativeScript с Angular и пытаюсь реализовать переключение тем, но не могу заставить его работать с пакетами Webpack.

Мои версии:

  • Angular 7.2.12
  • Nativescript-angular 7.2.3
  • Nativescript-themes 2.0.0
  • TypeScript 3.2.2

Я следовал инструкциям по реализации функции в проекте Angular: здесь и здесь .Но это для сборок без веб-пакетов (без флага --bundle).С флагом связки (и описанным здесь изменением ) переключение больше не работает, и на каждом переключателе возникает ошибка: 

JS: ~/assets/themes/dark.scss
JS: Error: Css styling failed: Error: undefined:1:26: missing '{'

Файл темы (находится в ~/assets/themes/dark.scss)

ActionBar {
  background-color: #B20000;
  color: #FFFFFF;
}

.btn-primary {
  background-color: #B20000;
  color: #000000;
}

Функция applyThemeCss() должна извлечь стиль из проекта, но не из-за ошибки.Тестовый проект можно найти здесь, на StackBlitz ( Я не использовал игровую площадку Nativescript, поскольку в ней нет package.json и папки assets )

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

applyThemeCss() ожидает, что текст CSS не путь к файлу. В примере кода он использует инструкцию require для чтения файла, а затем передает текст CSS методу.

Также в вашем случае, если вы хотите, чтобы несколько тем применялись динамически, вам, возможно, придется изменить webpack.config.js для отправки файлов CSS в комплект приложений, как показано ниже. 

        // Copy assets to out dir. Add your own globs as needed.
        new CopyWebpackPlugin([
            { from: { glob: "assets/**" } },
            { from: { glob: "fonts/**" } },
            { from: { glob: "**/*.jpg" } },
            { from: { glob: "**/*.png" } },
        ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

Затем используйте метод applyTheme() для передачи имени файла 

Themes.applyTheme(ThemeService.THEME_PATH + theme);

Если вы хотите использовать applyThemeCss(), прочитайте файл и передайте содержимое 

Themes.applyThemeCSS(knownFolders.currentApp().getFile('assets/themes/' + theme).readTextSync(), theme);
0 голосов
/ 24 апреля 2019

С помощью @Manoj мне удалось загрузить мои CSS-темы в мое приложение и переключать темы.

Строка { from: { glob: "assets/**" } }, копирует таблицы стилей из 'assets /' в 'dist / assets'.Но так как я хочу сохранить все свои стили в одной папке ('styles /'), мне нужно было обновить код до: { from: { glob: "styles/themes/**" }, to: 'assets/' },.

И так как я использую scss вместо css, мне все еще нужно преобразовать стиль.Мы можем сделать это с помощью renderSync метода node-sass .(см. этот пост для получения дополнительной информации)

Когда мы объединяем это, мы получаем следующий код: 

const scss = require('node-sass');

....

new CopyWebpackPlugin([
     {
        from: { glob: "styles/themes/*.scss" },
        to: 'assets/themes/[name].css',
        transform(content, path) {
            const result = sass.renderSync({ file: path });
            return result.css.toString();
        },
     },
     {from: {glob: "fonts/**"}},
     {from: {glob: "**/*.jpg"}},
     {from: {glob: "**/*.png"}},
], {ignore: [`${relative(appPath, appResourcesFullPath)}/**`]}),

Это копирует и компилирует файлы тем из styles/themes/до assets/themes/.Обратите внимание, что это также игнорирует любые подпапки, расположенные в папке тем.Таким образом, мы можем сделать следующее: 

themes/
-- parts/ // <-- This folder will not be copied
---- _dark-variables.scss 
---- _light-variables.scss
-- dark.scss // <-- This will be compiled into assets/themes/dark.css
-- light.scss // <-- This will be compiled into assets/themes/light.css
...