Webpack Can'；t使用--bundle设置全局自定义'cssFile'。（不使用--bundle则可以工作）

我们想根据一些逻辑应用不同的全局CSS文件

因此，我们做了一个小测试，检查应用自定义名称（不是

app.css

，而是

app1.css

）是否有效：

我们使用了示例项目：

tns create aaa--ng

&webpack（所有最新版本）

它确实工作（没有

——捆绑

）

因此，您可以看到项目为红色：

但是-现在我们想用

--bundle

进行测试

（也修改了

main.aot.ts

）如下：

但是-运行

tns run android--bundle

不起作用：

../node_modules/nativescript dev webpack/load-application-css-angular.js中出错
找不到模块：错误：无法解析“C:\Users\sff\Desktop\delme1\ddd\node\U modules\nativescript dev webpack”中的“~/app”
@../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

他们都没有工作

问题：

似乎不尊重带有
--bundle
的
app1.css
。仅尊重
app.css

如何为我的应用程序设置全局自定义css文件




项目样本：

nativescript@4.1.1

Windows 10
要根据业务逻辑更改应用程序范围的css文件，可以使用nativescript核心软件包中的
应用程序
模块

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

您可以在app.component.ts构造函数中编写业务逻辑，并基于该调用来更改应用程序级css文件

以下是游乐场演示供参考：
尝试以下步骤：

使用app.scss和app.css将您的网页包配置文件还原为原始配置

添加您的主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)}/**`] }),

在你的主屏幕上

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

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

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

谢谢。但是，正如我所说，它不适用于
--bundle
。而且它在没有
--bundle
platformNativeScriptDynamic（{startPageActionBarHidden:false，cssFile:“app1.css”}）的情况下也能工作；这可能不适用于
--bundle
，但此解决方案也适用于
--bundle
。要保留修改后的网页文件吗？（我正在尝试-将在1分钟内更新）不需要修改网页文件来更改全局css。好的，让我试试。。。更新在1分钟链接-有什么我错过了？顺便说一句，我喜欢你的ns插件，并经常使用它。我有一些问题，我的android配置，我会检查。。。很高兴听到你在使用这个插件！谢谢-那太好了。（）顺便说一句，imho AOT只有在--env.AOT时才起作用，这不是我的情况
 // 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)}/**`] }),

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