Angular 9 / Nativescript 6 代码共享应用程序不是为移动设备构建的 - 怀疑是 SASS 问题:



我有一个Angular 8,Nativescript 5代码共享应用程序,我将其更新为Angular 9和Nativescript 6。它适用于浏览器和Electron打包的桌面应用程序,但不会为移动设备构建。

构建日志的结尾显示:

CONSOLE ERROR file: node_modules/@nativescript/core/trace/trace.js:174:0: Error: Could not load CSS from app.css: ReferenceError: Can't find variable: undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedu<…>

包.json

{
"name": "project",
"nativescript": {
"id": "org.nativescript.project",
"tns-android": {
"version": "6.5.1"
},
"tns-ios": {
"version": "6.5.1"
}
},
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"android": "tns run android",
"ios": "tns run ios",
"mobile": "tns run",
"preview": "tns preview",
"postinstall": "ngcc",
},
"private": true,
"dependencies": {
"@angular/animations": "9.1.9",
"@angular/common": "9.1.9",
"@angular/compiler": "9.1.9",
"@angular/core": "9.1.9",
"@angular/forms": "9.1.9",
"@angular/localize": "^9.1.9",
"@angular/platform-browser": "9.1.9",
"@angular/platform-browser-dynamic": "9.1.9",
"@angular/router": "9.1.9",
"@nativescript/angular": "^9.0.0",
"@nativescript/theme": "^2.3.3",
"@ng-bootstrap/ng-bootstrap": "^6.1.0",
"big.js": "^5.2.2",
"bootstrap": "^4.5.0",
"core-js": "^3.6.5",
"reflect-metadata": "^0.1.13",
"rxjs": "^6.4.0",
"tslib": "^1.13.0",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.7",
"@angular/cli": "^9.1.7",
"@angular/compiler-cli": "9.1.9",
"@nativescript/core": "^6.5.4",
"@nativescript/schematics": "~1.0.0",
"@nativescript/tslint-rules": "0.0.5",
"@types/big.js": "^4.0.5",
"@types/electron": "^1.6.10",
"@types/jasmine": "^3.5.10",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^14.0.11",
"codelyzer": "^5.2.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.2",
"karma": "^5.0.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~3.3.1",
"karma-jasmine-html-reporter": "^1.4.0",
"nativescript": "^6.7.4",
"nativescript-dev-webpack": "^1.5.1",
"node-sass": "^4.14.1",
"nodemon": "^2.0.4",
"protractor": "~7.0.0",
"ts-node": "~8.10.2",
"tslint": "~6.1.2",
"typescript": "^3.8.3"
}
}

应用程序.scss 文件:

@import '~@nativescript/theme/scss/variables';
@import '~@nativescript/theme/scss/variables/blue';
@import "~@nativescript/theme/core";
@import "~@nativescript/theme/blue";

webpack.config 摘录.js

{
test: /[/|\]app.scss$/,
use: [
"nativescript-dev-webpack/style-hot-loader",
{
loader: "nativescript-dev-webpack/css2json-loader",
options: { useForImports: true }
},
"sass-loader"
]
},
// Angular components reference css files and their imports using raw-loader
{ test: /.css$/, exclude: /[/|\]app.css$/, use: "raw-loader" },
{ test: /.scss$/, exclude: /[/|\]app.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },

我尝试删除/hooks、/platform、package-lock.json、webpack.config.js 和/node_modules 并重建 - 仍然得到同样的错误。

我还尝试了几个版本的 app.scss 文件,有和没有/variable/导入,或者以不同的顺序。

我已经删除并重新添加了平台ios和平台Android。

我已经搜索了几个小时,类似声音问题的解决方案并没有改变任何东西。

请参阅以下 2 个报告的问题,这些问题目前提供了解决方法: https://github.com/NativeScript/nativescript-angular/issues/2174 https://github.com/NativeScript/nativescript-dev-webpack/issues/1138

最新更新