diff --git a/tns-core-modules/ui/builder/builder.ts b/tns-core-modules/ui/builder/builder.ts index 5be174437..2c597c7ee 100644 --- a/tns-core-modules/ui/builder/builder.ts +++ b/tns-core-modules/ui/builder/builder.ts @@ -115,15 +115,28 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr result = getComponentModule(componentName, componentPath, attributes, context); } - // Add component CSS file if exists. - var cssFilePath = resolveFileName(fullComponentPathFilePathWithoutExt, "css"); - if (cssFilePath) { - if (parentPage && typeof (parentPage).addCssFile === "function") { - (parentPage).addCssFile(cssFilePath); - } else { - ensureTrace(); + // webpack modules require paths to be relative to /app folder. + let cssModulePath = fullComponentPathFilePathWithoutExt + ".css"; + if (cssModulePath.startsWith("/")) { + var app = knownFolders.currentApp().path + "/"; + if (cssModulePath.startsWith(app)) { + cssModulePath = "./" + cssModulePath.substr(app.length); + } + } - trace.write("CSS file found but no page specified. Please specify page in the options!", trace.categories.Error, trace.messageType.error); + // Add CSS from webpack module if exists. + if (global.moduleExists(cssModulePath)) { + (parentPage).addCssFile(cssModulePath); + } else { + var cssFilePath = resolveFileName(fullComponentPathFilePathWithoutExt, "css"); + // Add component CSS file if exists. + if (cssFilePath) { + if (parentPage && typeof (parentPage).addCssFile === "function") { + (parentPage).addCssFile(cssFilePath); + } else { + ensureTrace(); + trace.write("CSS file found but no page specified. Please specify page in the options!", trace.categories.Error, trace.messageType.error); + } } } diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts index c2400ab71..1779789c6 100644 --- a/tns-core-modules/ui/styling/style-scope.ts +++ b/tns-core-modules/ui/styling/style-scope.ts @@ -80,22 +80,34 @@ class CSSSource { } public static fromURI(uri: string, keyframes: KeyframesMap): CSSSource { + // webpack modules require all file paths to be relative to /app folder. + let appRelativeUri = uri; + if (appRelativeUri.startsWith("/")) { + var app = knownFolders.currentApp().path + "/"; + if (appRelativeUri.startsWith(app)) { + appRelativeUri = "./" + appRelativeUri.substr(app.length); + } + } + try { - const cssOrAst = global.loadModule(uri); + const cssOrAst = global.loadModule(appRelativeUri); if (cssOrAst) { if (typeof cssOrAst === "string") { - return CSSSource.fromSource(cssOrAst, keyframes, uri); + // raw-loader + return CSSSource.fromSource(cssOrAst, keyframes, appRelativeUri); } else if (typeof cssOrAst === "object" && cssOrAst.type === "stylesheet" && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) { - return CSSSource.fromAST(cssOrAst, keyframes, uri); + // css-loader + return CSSSource.fromAST(cssOrAst, keyframes, appRelativeUri); } else { - // Probably a webpack css-loader exported object. - return CSSSource.fromSource(cssOrAst.toString(), keyframes, uri); + // css2json-loader + return CSSSource.fromSource(cssOrAst.toString(), keyframes, appRelativeUri); } } } catch(e) { // } - return CSSSource.fromFile(uri, keyframes); + + return CSSSource.fromFile(appRelativeUri, keyframes); } public static fromFile(url: string, keyframes: KeyframesMap): CSSSource {