Question

我们希望根据某些逻辑应用不同 GLOBAL CSS文件。

所以我们做了一个小测试，只是检查应用自定义名称（不是app.css而是app1.css）是否有效：

我们使用了示例项目：tns create aaa --ng和webpack（所有最新版本）

//main.ts:
platformNativeScriptDynamic({
                                startPageActionBarHidden: false ,
                                cssFile:"app1.css"
                            }) .bootstrapModule(AppModule);

它确实有效（没有--bundle）。

所以您可以看到项目是红色的：

但是-现在我们想用--bundle， so we've modified the webpack json file also to search for app1.css and not app.css

进行测试

（还用{修改了main.aot.ts）：

import { setCssFileName } from "application";
setCssFileName("./app1.css");

但是-运行tns run android --bundle无效：

ERROR in ../node_modules/nativescript-dev-webpack/load-application-css-angular.js Module not found: Error: Can't resolve '~/app' in 'C:\Users\sff\Desktop\delme1\ddd\node_modules\nativescript-dev-webpack' @ ../node_modules/nativescript-dev-webpack/load-application-css-angular.js 5:49-65 @ ./main.ts

我也尝试过：

import { setCssFileName } from "application";
setCssFileName("./app1.css");

它运行完毕，但是没有应用app1.css文件（此处没有红色）：

我们尝试了许多变体： cssFile:"app1.css" cssFile:"./app1.css" cssFile:"~/app1.css" cssFile:"/app1.css"

但是当我考虑时，这个^并不相关-因为如果我cssFile:"app1.css" 不 --bundle做，那么-app1.css就受到尊重。问题是--bundle

不被尊重

他们都没有工作。

问题：

似乎app1.css和--bundle不受尊重。仅尊重app.css。

如何为我的应用设置 global 自定义css文件？

package.json
项目样本：https://ufile.io/ge4to

nativescript@4.1.1
Windows 10

Answer 1

要基于业务逻辑更改应用程序范围的css文件，可以使用nativescript核心软件包中的application模块。

import { setCssFileName } from "application";
setCssFileName("./app1.css");

您可以在app.component.ts构造函数中并根据该调用setCssFileName()来编写业务逻辑，以更改应用程序级别的CSS文件。

这是游乐场演示供参考：https://play.nativescript.org/?template=play-ng&id=LnjIr4

Answer 2

尝试以下步骤：

使用app.scss和app.css将webpack配置文件还原为原始配置

添加您的主要scss文件app.scss

添加其他文件app1.android.scss，app2.android.scss，app3.android.scss ...

修改您的webpack配置文件以像复制其他资产一样复制此css文件

在“插件”部分：

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

            new CopyWebpackPlugin([
                { from: "**/app1.android.css" },
                { from: "**/app2.android.css" },
                { from: "**/app3.android.css" },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

在您的main.ts上

const randomInt = 2;// your logic 
platformNativeScriptDynamic({
                                startPageActionBarHidden: false ,
                                cssFile:`app${randomInt}.android.css`
                            }) .bootstrapModule(AppModule);

在main.aot.ts上执行相同的操作，将在启用aot（-env.aot）

时使用。

这应该可以，但是应该使用变量和正则表达式对其进行调整以支持iOS。

无法使用--bundle设置全局自定义`cssFile`。（在没有--bundle的情况下有效）

2 个答案: