React shortcut to importing style files

user_11119456 0
Viewed 1001

I'm working in a React project.
In a component's specific SASS file, I import SASS partials like this: 

@import '../../styles/fonts';

When I was working in Angular project, the previous path could be simplified with: 

@import 'fonts';

And how this can be achieved is by adding a configuration to ".angular.cli.json" as described in this link https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components.

My Question is: is there a way to achieve the same result in a React project? and how?

Thank you!

reactjs sass css
1 Answers

You can use Webpack aliases ( assuming that you're using webpack ) to resolve the imports and then use the alias name in your scss file to import the module like this :

webpack.config.js

const path = require('path');

module.exports = {
  //...
 resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
 }
};

and import like 

@import '~styles/variables';

For more info refer these

Hope this helps !

user_64831210
Related