@import Platform specific extensions

[mohammad76]

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]

Which version of this library are you using? The platform specific extensions should work as of version 1.3.0.

One thing that you also need to remember, is that you need to restart the React Native packager if you add new files to the project.

If you have your project/code with the problem available somewhere, I can have a look at it.

[mohammad76]

my library version is 1.3.1.

I restart the React Native packager but my code not work again.

how use import ? address the file from project root or not ? with .scss extension or not?

please show me the example. how to use @import with platform specific extensions. thanks

[kristerkari]

Thanks for the additional info. 👍

The imports should work the same way as in normal Sass.

It might be that there is a bug and it does not work because of that. I will take your example and see if it works for me. I will let you know if I managed to get it work or not.

[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.

[mohammad76]

thanks for example.but my app still not work.

this is my error

error: bundling failed: Error: File to import not found or unreadable: ./assets/scss/main.
    at Object.module.exports.renderSync (G:\WhmcsApp\node_modules\node-sass\lib\index.js:439:16)
    at Object.module.exports.transform (G:\WhmcsApp\node_modules\react-native-sass-transformer\index.js:93:23)
    at G:\WhmcsApp\node_modules\metro\src\JSTransformer\worker.js:161:31
    at Generator.next (<anonymous>)
    at step (G:\WhmcsApp\node_modules\metro\src\JSTransformer\worker.js:40:30)
    at G:\WhmcsApp\node_modules\metro\src\JSTransformer\worker.js:59:14
    at new Promise (<anonymous>)
    at G:\WhmcsApp\node_modules\metro\src\JSTransformer\worker.js:37:12
    at JsTransformer.transform (G:\WhmcsApp\node_modules\metro\src\JSTransformer\worker.js:297:7)

App.scss

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

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

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

main.android.scss

.foo {
  color: #f00;
}

App.js

import React, {Component} from 'react';
import {View ,Text} from 'react-native';
import styles from './assets/scss/App'
import DText from "./assets/DefaultComponnents/DText";

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.viewbox}>
        <DText>hello application!</DText>
        <DText style={{textAlign: 'center'}}>To get started, edit App.js</DText>
          <Text style={styles.foo}></Text>
      </View>
    );
  }
}

[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";

[mohammad76]

@kristerkari finally my app working.

Thanks for helping me and building such great library.

[kristerkari]

Great, let me know if you run into any other issues 👍