search

NativeScript / nx

NativeScript for Nx.
Other
61 stars 15 forks source link

How to do shared scss styles #62

Closed fpaaske closed 1 year ago

fpaaske commented 1 year ago

I'm using Angular and I have a structure like this:

Now I want to share styles between lib1 and lib2 from the common lib; styles. So in my lib1/.../some.component.scss I try to @import "@styles/common" or @import "../../styles/lib/common" but when I run the app I get error messages that it can't find the imported styles.

Here's a concrete example when importing a shared style into an app:

ERROR in ./src/app.ios.scss
Module build failed (from ../../node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @import "../libs/nativescript-styles/src/font-scale";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/_app-common.scss 5:9  @import
  src/app.ios.scss 1:9      root stylesheet
 @ ./src/main.ts 2:0-24

What's the correct way of handling this case with NativeScript, Angular and NX?

fpaaske commented 1 year ago

Ok, it turns out we (my IDE and I) are confused about the paths.. It makes sense now that it works, but very annoying that the IDE is unable to better help. Is there something we can setup/configure in the workspace to better solve this?

Here's what I experience:

From apps/nativescript-demo1/src/app.ios.scss: These shows no error in IntelliJ, but doesn't compile @import '/libs/nativescript-styles/src/lib/styles'; @import '../libs/nativescript-styles/src/lib/styles';

This shows no error, and works! @import '../../libs/nativescript-styles/src/lib/styles';

This shows error, and doesn't compile! @import '../../../../libs/nativescript-styles/src/lib/styles';

Import from other lib, libs/nativscript-shared-ui/src/lib/button/my-button.component.scss:

@import "libs/nativescript-styles/src/lib/styles"; // no IDE warning, doesn't compile
@import "/libs/nativescript-styles/src/lib/styles"; // no IDE warning, doesn't compile
@import "../libs/nativescript-styles/src/lib/styles"; // no IDE warning, doesn't compile
@import "../../libs/nativescript-styles/src/lib/styles"; // IDE warning, doesn't compile
@import "../../../libs/nativescript-styles/src/lib/styles"; // IDE warning, doesn't compile
@import "../../../../libs/nativescript-styles/src/lib/styles"; // IDE warning, doesn't compile
@import "../../../../../libs/nativescript-styles/src/lib/styles"; // WORKS
@import "../../../../../../libs/nativescript-styles/src/lib/styles"; // IDE warning, doesn't compile

To illustrate the frustration, this is the autocomplete suggestions for "mid ../../":

image