RadouaneRoufid
commented
6 years ago I had to do this as a possible workaround :
webpack.config.js
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}`,
},
...nativescript-dev-sass/lib/before-prepare.js
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.
NickIliev
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" };
};