How to use sass/scss styles

[VityaSchel]

I'm going to leave this issue for discussion because author is dead

I'm using react-native-sass-transformer to generate stylesheets from .scss modular files in my app. On phone it works fine, but in web with webpack and electron-builder it only outputs css files into page, but does not append classNames to Views, elements, etc.

Neither style nor className attribute works, it replaces anything inside these with custom styles

However styles are there, generated from file and ready to be used:

The only problem is to write correct class names into class argument in DOM and all methods I tried with webpack didn't work well. I thought maybe inject javascript utility that goes through each element and adds specific class to classList of it? But how to find out which element should have which class? I tried to pass name, data, some random arguments to <View> but they aren't appearing in built version on the page (my goal was to have something like <View realClass="gybberish" /> and <div realClass="gybberish" /> to then make it into <div class="css-view-175oi2r gybberish" />)

Any ideas on how to implement this?

[VityaSchel]

Since this library works well with inline style={} attributes where you put styles right into prop, maybe it's better to find loaders that can load sass files and put contents into prop

[VityaSchel]

Also you can use style prop to pass real classname into page with css-variables like this:

<View style={style.container ?? { '--realClassName': 'container' }} />

on page:

<div class="css-view-175oi2r" style="--realClassName:container;" />

But how to generate ?? { '--realClassName': 'container' } part before webpack and its style loaders catches it? Is it worth doing this at all?

[VityaSchel]

I used

{ 
    test: /\.tsx?$/, 
    use: [
      { 
        loader: 'string-replace-loader',
        options: {
          search: /style={styles\.([a-zA-Z_0-9]+)}/,
          replace: 'style={{ "--realClassName": "$1" }}',
        }
      }
    ]
  }

but it doesn't work with modules anyway so you have to find a better way good luck