Monday, 24 April 2017

How to have a reference to project's root folder with node-sass and sass-loader using webpack

I've created a React project with create-react-app command, it uses webpack.

In order to use SASS I needed to eject with npm run eject command and to manually add SCSS loader inside loaders array, as explained here.

This is my first time with React and I'm using a per comonent style approach which consist in importing a .scss file per component.

I have a global variables file in ~/my-project-folder/src/assets/styles/_variables.scss and I want to import it from ~/my-project-folder/src/scenes/Auth/Login/styles/login.scss, of course I don't want to do something like @import '../../../assets/styles/_variables.scss'.

I've seen that I can refer to SASS files inside node_modules folder this way: @import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; so I'm wondering what is the way to refer to my project's root directory, i.e. ~/my-project-folder.



via Cristian Rojas

No comments:

Post a Comment