Open wallaceturner opened 4 years ago
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.
Recreate
1) expo init
2) Select 'Typescript Minimal 3)
yarn add --dev react-native-sass-transformer node-sass 4) Create file
App.scssand paste in css from your instructions 5) Modify
App.tsx a) comment out
const stylesblock b) add
import styles from "./App.scss";to
App.tsx c) add
console.log('styles', styles) 6) add
metro.config.jsand edit
app.json` as per your instructions
7) yarn start
I have created a repo here: https://github.com/wallaceturner/sass-spike
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"]
}
would you be able to send me your working project so i can diff the two to resolve the problem?
sure, just a moment
Here's the project: https://github.com/kristerkari/expo-scss-test
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
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.
Yes, sorry I omitted the crucial instruction apologies! Could you please detail the extra setup?
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).
Any updates on this? I'm also not getting an object from styles
but rather the filename.
@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.
...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.
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
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.
I'm using expo 3.4.1 with a blank app and have followed your setup instructions however no styles are transformed
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