时间戳

首页 > 解决方案 > 无法使用 --bundle 设置全局自定义“cssFile”。（没有 --bundle 也可以）

webpack - 无法使用 --bundle 设置全局自定义“cssFile”。（没有 --bundle 也可以）

问题描述

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

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

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

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

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

图片

所以你可以看到 Items 是红色的：

图片

但是- 现在我们想用 进行测试--bundle，所以我们修改了 webpack json 文件来搜索app1.css而不是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.csswith--bundle是不被尊重的。只有app.css尊重。

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

package.json
项目示例： https ://ufile.io/ge4to

nativescript@4.1.1
Windows 10

标签： webpacknativescriptangular2-nativescript

解决方案

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

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

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

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

推荐阅读