RadouaneRoufid
commented
6 years ago any suggestions to this ?
Closed RadouaneRoufid closed 5 years ago
RadouaneRoufid
commented
6 years ago any suggestions to this ?
RadouaneRoufid
commented
6 years ago I had to do this as a possible workaround :
Declaring the main sheet
let mainSheet;
module.exports = env => {
const platform = env && (env.android && "android" || env.ios && "ios");
if (!platform) {
throw new Error("You need to provide a target platform!");
}
const platforms = ["ios", "android"];
const { snapshot, uglify, report, aot } = env;
const ngToolsWebpackOptions = { tsConfigPath: "tsconfig.json" };
mainSheet = `app.${platform}.css`;
const config = {
context: resolve("./app"),
target: nativescriptTarget,
entry: {
bundle: aot ? "./main.aot.ts" : "./main.ts",
vendor: "./vendor",
[mainSheet]: `./${mainSheet}`,
},
...I had to modify this file, to allow scss file to be compiled when --bundle option is active.
var converter = require('./converter');
module.exports = function ($logger, $projectData, $usbLiveSyncService) {
var liveSync = $usbLiveSyncService.isInitialized;
var bundle = $projectData.$options.bundle;
if (liveSync) {
$logger.warn("Hook skipped because either bundling or livesync is in progress.")
return;
}
return converter.convert($logger, $projectData.projectDir, $projectData.appDirectoryPath);
}Style is now picked and applied.
leocrawf
commented
6 years ago This fixed my css issue with webpack. Thank you so much.
exeleon
commented
6 years ago I have nativescript-dev-webpack 0.9.2 and this problem was related with #298 . I replaced my imports with "~/" to "./" and works perfectly with --bundle.
RadouaneRoufid
commented
6 years ago Still having the issue with "nativescript-dev-webpack": "^0.10.1",
leocrawf
commented
6 years ago I am not sure but I all works now. I removed the modification above and it still works as expected.
RoyiNamir
commented
6 years ago @RadouaneRoufid Hi. Have you met this problem ? (similar)
RadouaneRoufid
commented
6 years ago Have you tried to set mainSheet in entry in webpack.config.js ?
entry: {
bundle: aot ? "./main.aot.ts" : "./main.ts",
vendor: "./vendor",
[mainSheet]: `./app1.css`,
},@RadouaneRoufid Thanks for response.
it's a brand new empty project ( via tns create ddd --ng).
All I want is that app1.css will be the global css - not the app.css
(becuase in the real scenario we need to apply different css files accordigng to language).
main.aot.ts
main.ts :
webpack :
with --bundle I see the app eventually running but with error :
With uglify , it is stuck forever on this error :
This is the demo empty project i'm using : https://ufile.io/x1ilb
it's a completly empty project...
RadouaneRoufid
commented
6 years ago Just a little question ?
The css file selection is done just at build time ? Or dynamically at runtime ?
RoyiNamir
commented
6 years ago @RadouaneRoufid in runtime. Think of it as if the user changed preferd language in the app and it is saved in applican settings And next time the app is on we should apply the right css (each css file has different font file which is the main reason for this whole thing)
RadouaneRoufid
commented
6 years ago Correct me if I'm wrong but is seems like you address a build time problem which has not be the case. If you let app.css file and try to uply your logic in your custom Activity
class ActivityAndroid extends android.support.v7.app.AppCompatActivity {
protected onStart(): void {
// Apply custom logic to apply css here or in OnCreate lifecycle ??
this._callbacks.onStart(this, super.onStart);
}
}Any way your error seems to be a import problem. Try relative path to app instead of tild one ~/app
RoyiNamir
commented
6 years ago @RadouaneRoufid i never used any ~/app in my code.
The build shows error with bundle but runs ok
The build shiws error and stuck with uglify
RadouaneRoufid
commented
6 years ago Okay, your problem is that when bundling, load-application-css.js will try to load ~/app.* which does not exist in your case.
../node_modules/nativescript-dev-webpack/load-application-css.js
const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);You will have to create an empty app.css or modify this file or find another approach to address your need !
mikaelkalt
commented
6 years ago We're facing more or less the same problem. Since --bundle ignores sass compilation our CI build fails, because non of the css files we're referencing from the components are available.
Is there a workaround for that? I don't really understand why sass compilation is disabled for bundling? Can we somehow trigger this hook manually before?
I've created a sample project to demonstrate the problem: https://github.com/mikaelkalt/nativescript-angular-sass-webpack-sample
marklanhamhc
commented
5 years ago Yeah I'm having the same problem. I'm using Nativescript with Angular but when I try and run $ tns build ios --bundle using Webpack (following these instructions: https://docs.nativescript.org/angular/performance-optimizations/bundling-with-webpack) I just get the error:
File to import not found or unreadable: ~/app-variables.
mhmo91
commented
5 years ago any updates here?
marklanhamhc
commented
5 years ago Managed to sort my issue, it turns out the path WAS incorrect, you can’t use a tilde ~ you have to use a relative path, for example './../../app-variables'
miroslavaivanova
commented
5 years ago I'm closing this issue as it should be working now.
Issue Checklist
Tell us about the problem
Applying a --bundle option makes the application lose its css. Everything is ok when the command is run without --bundle.
Local environment
Project data
app.component.ts
app.android.scss
package.json
const webpack = require("webpack"); const nsWebpack = require("nativescript-dev-webpack"); const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = env => { const platform = env && (env.android && "android" || env.ios && "ios"); if (!platform) { throw new Error("You need to provide a target platform!"); } const platforms = ["ios", "android"]; const { snapshot, uglify, report, aot } = env; const ngToolsWebpackOptions = { tsConfigPath: "tsconfig.json" };
};