no errors but styles are not being output

[wallaceturner]

I'm using expo 3.4.1 with a blank app and have followed your setup instructions however no styles are transformed

import styles from "./App.scss";

console.log('styles', styles)

the output of this is
styles /static/media/App.f330be79.scss

I'm assuming that it should actually output the styles object. I'm using a typescript project

[kristerkari]

Thanks! Any possibility for you to upload your project somewhere where I can have a look at it? I can't really help with the setup with only the details that you provided.

[wallaceturner]

Recreate

1. expo init
2. Select 'Typescript Minimal`
3. yarn add --dev react-native-sass-transformer node-sass
4. Create file App.scss and paste in css from your instructions
5. Modify App.tsx
   a) comment out const styles block
   b) add import styles from "./App.scss"; to App.tsx
   c) add console.log('styles', styles)
6. add metro.config.js and edit app.json as per your instructions
7. yarn start

I have created a repo here: https://github.com/wallaceturner/sass-spike

[kristerkari]

I could not get the project from your repo to work, but I created a new project with Expo and got it to work. When using Typescript is important to check that the extensions match:

    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["ts", "tsx", "scss", "sass"]
    }

[wallaceturner]

would you be able to send me your working project so i can diff the two to resolve the problem?

[kristerkari]

sure, just a moment

[kristerkari]

Here's the project:
https://github.com/kristerkari/expo-scss-test

[wallaceturner]

Thanks. your project does not work for me either. same result as before. here is a screenshot
https://imgur.com/a/bNAG12T
what command are you using to run your project?
your project looks like a skeleton from create-native-app however I used one via expo init - if you get a chance could you try it from expo init as per the 7 steps above as the packages.json files differ significantly between the two projects

[kristerkari]

here is a screenshot

Oh, you are trying to run it on Web. That's not supported out of the box and requires some extra setup.

what command are you using to run your project?

yarn ios

if you get a chance could you try it from expo init as per the 7 steps above as the packages.json files

That's what I did, it ran the same commands that you pasted.

[wallaceturner]

Yes, sorry I omitted the crucial instruction apologies! Could you please detail the extra setup?

[kristerkari]

Unfortunately the Web support for Expo is quite a new thing, and I haven't had the time to look at it, so I can not currently give you any instructions on how to do it.

What it would need is a small plugin (for Webpack I think) that does the same thing as the transformer (calls Sass and then parses the CSS into a style object).

[riccardolardi]

Any updates on this? I'm also not getting an object from styles but rather the filename.

[kristerkari]

@riccardolardi not yet, I haven't had a look at the Expo Web support yet. I'm guessing that it would need some kind of a plugin/webpack setup to get it to work.

[nikshirobokov]

...also not getting an object from styles but rather the filename.

Is there any progress in solving this issue? Or there may be recommendations for extra configuration for the Expo Web. 3 years after the opening of this, I'm getting a similar issue.

[nikshirobokov]

I catch this!

To launch the browser version, Expo Web uses webpack by default and to launch Android/iOS versions, Expo uses metro (if you doesn't change it yourself).

This problem with importing styles occurs due to the fact that we configure the metro configuration and expect to get the result for the web version too, but this does not happen, since webpack is used by default for browsers. All you need to do is switch the web handler in app.json.

/* app.json */
{
  "expo": {
    ...,
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["ts", "tsx", "scss"] /* My project uses typescript and SCSS */
    },
    "web": {
      "bundler": "metro", /* Expo Web uses webpack by default */
      ...
    },
    ...
  }
}

In general, this is logical and you can read more about the difference between the Webpack with Metro of the web version on the official Expo website: https://docs.expo.dev/guides/customizing-metro/#expo-webpack-vs-expo-metro

[DeveloperBlue]

Unfortunately for me, I cannot use the Metro bundler for web at this time. Is there any way to get this plugin to work with Webpack? I am on Expo 49.

One of my build targets is Electron, and the tooling for it (Electron-Forge) uses webpack to build its renderer process.