Nativescript Angular，正在更改主题

Question

我正在使用 Angular 构建一个 NativeScript 应用程序，我正在尝试实现主题切换，但我无法让它与 Webpack 捆绑一起使用。

我的版本：

Angular 7.2.12
Nativescript-angular 7.2.3
Nativescript 主题 2.0.0
打字稿3.2.2

我按照教程在 Angular 项目中实现了该功能：here and here. But these are for non-webpack (without the --bundle flag) builds. With the bundle flag (and the change described here）切换不再有效，每个切换都会抛出错误：

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() 应该从项目中提取样式，但由于错误而没有提取。可以找到测试项目 here, on StackBlitz （我没有使用 Nativescript playground，因为它没有 package.json 和资产文件夹 ）

Answer 1

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);

Answer 2

在@Manoj 的帮助下，我成功地将 css 主题加载到我的应用程序中并切换了主题。

行 { from: { glob: "assets/**" } }, 将样式表从 'assets/' 复制到 'dist/assets'。但由于我想将所有样式保存在同一个文件夹中 ('styles/')，我需要将代码更新为：{ from: { glob: "styles/themes/**" }, to: 'assets/' },。

并且因为我使用的是 scss 而不是 css 我仍然需要转换样式。我们可以通过 node-sass. (see this post 的 renderSync 方法来完成此操作以获取更多信息）

当我们合并它时，我们得到以下代码：

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

Nativescript Angular，正在更改主题

Nativescript Angular, changing theme

sass

typescript

nativescript

nativescript-angular

angular