search

kristerkari / react-native-sass-transformer

Use Sass to style your React Native apps.
MIT License
219 stars 19 forks source link

Are aliases possible inside the scss file? #19

Open toshiSat opened 5 years ago

toshiSat commented 5 years ago

I haven't figured out a way yet to have aliases inside the scss file.

kristerkari commented 5 years ago

Sorry, but I'm not sure what you mean. Can you give a code example of what you are trying to do?

toshiSat commented 5 years ago

So with React.js I'm able to create aliases in webpack. I can then transpile them in .js, .jsx, .css, .scss, etc files. I can make aliases in React Native to doing something like this ["module-resolver", { "root": ["./src"], "alias": { "@api": "./src/api", "@app": "./src/modules/app", "@common": "./src/common", "@components": "./src/common/components", "@modules": "./src/modules", "styles": "./src/common/styles", "@utils": "./src/common/utils" } }]

So if I want to import something from the components directory i can import component from '@components/component'

In React.js I can also do this from scss files, I was wondering if it's possible to do this using your module as well. I think it looks something like this: @import '~styles/colors.scss"

kristerkari commented 5 years ago

Thanks, I understand now what you mean.

The aliases are not supported by default as the library does not use Webpack, but I think that you should be able to use aliases by adding this library to your project: https://www.npmjs.com/package/node-sass-importer-alias

You can pass the aliases inside importer in Sass' options: https://github.com/kristerkari/react-native-sass-transformer#sass-options

kristerkari commented 5 years ago

Actually I just tested the example that I gave, and I could not make it work like that. I need to have another look to try to figure out how to get the aliases to work.