Всякий раз, когда я делаю сборку релиза своего приложения (я делаю это через Nativescript Sidekick), мои sass-изменения не компилируются правильно, и я просто получаю простой текст без каких-либо стилей.
my package.json
"nativescript": {
"id": "com.transperfect.projectamobileapp",
"tns-ios": {
"version": "6.1.0"
},
"tns-android": {
"version": "6.1.1"
}
},
"dependencies": {
"@angular/animations": "~8.2.9",
"@angular/common": "~8.2.9",
"@angular/compiler": "~8.2.9",
"@angular/core": "~8.2.9",
"@angular/forms": "~8.2.9",
"@angular/platform-browser": "~8.2.9",
"@angular/platform-browser-dynamic": "~8.2.9",
"@angular/router": "~8.2.9",
"nativescript-angular": "~8.2.0",
"nativescript-iqkeyboardmanager": "~1.3.0",
"nativescript-pdf-view": "~2.0.1",
"nativescript-theme-core": "~1.0.6",
"nativescript-ui-calendar": "5.0.0",
"nativescript-ui-listview": "~7.1.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.4.0",
"tns-core-modules": "~6.1.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "~8.2.9",
"@ngtools/webpack": "~8.2.2",
"codelyzer": "^5.1.2",
"nativescript-dev-webpack": "~1.2.1",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"tns-platform-declarations": "6.0.1",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
},
и в моей конфигурации webpack у меня есть загрузчик sass как таковой
module: {
rules: [
{
include: join(appFullPath, entryPath),
use: [
// Require all Android app components
platform === "android" && {
loader: "nativescript-dev-webpack/android-app-components-loader",
options: { modules: appComponents }
},
{
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
angular: true,
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
}
},
].filter(loader => !!loader)
},
{ test: /\.html$|\.xml$/, use: "raw-loader" },
// tns-core-modules reads the app.css and its imports using css-loader
{
test: /[\/|\\]app\.css$/,
use: [
"nativescript-dev-webpack/style-hot-loader",
{ loader: "css-loader", options: { url: false } }
]
},
{
test: /[\/|\\]app\.scss$/,
use: [
"nativescript-dev-webpack/style-hot-loader",
{ loader: "css-loader", options: { url: false } },
"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"] },
У меня есть структура sass, как показано ниже
- app
- _app-common.scss
- _app-common.scss
- app.android.scss
- app.ios.scss
- pages
- page.component.scss
- page.component.android.scss
- page.component.ios.scss
Sass отлично откомпилируется для соответствующего Android / scss в режиме отладки, но как только я переключаю его на Release, все эти приятные стили исчезают.
Пожалуйста, дайте мне знать, если вы знаете, что я делаю неправильно. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать. Спасибо