@import Platform specific extensions

hi , I Want import a scss file to my App.scss using @import with Platform specific extensions.

this is my code

@import "./assets/scss/main";

with this code I get error file not exist , but my file is main.android.scss exist.

please help me to use Platform specific extensions with @import

[kristerkari]

Thanks for the response @mohammad76.

From your example it seems that you might be referencing the relative paths in a wrong way. You are thinking that the import always starts from the root folder.

So, if your App.scss is in the assets/scss folder, and inside it you are referencing to "./assets/scss/main", then it tries to find the file from assets/scss/assets/scss/main.android.scss.

If App.scss and main.android.scss are in the same folder then the import should be like this:

.head {
  color: #333;
  font-family: shabnam;
  text-align: center;
}

.viewbox{
  padding: 10px;
  border: 1px solid #ddd;
  margin: 10px;
  border-radius: 5px;
}

@import "./main";

or (I don’t remember if this also works):

.head {
  color: #333;
  font-family: shabnam;
  text-align: center;
}

.viewbox{
  padding: 10px;
  border: 1px solid #ddd;
  margin: 10px;
  border-radius: 5px;
}

@import "main";

[kristerkari]

@mohammad76 I just tested your example with one of the demo apps and it is working for me. Here’s what I did:

App.js

import test from "./test.scss";

<Text style={test.foo}>Test</Text>

test.scss

@import "./assets/scss/main";

assets/scss/main.android.scss

.foo {
  color: #f00;
}

When I run that on Android, the app renders a red text.