create-react-app 2.0, how to use absolute path import in sass/scss files?

Is this a bug report?

No

The problem

I am using creacte-react-app 2.0.0-next.66cc7a90, which already has support for Sass/Scss files

however with default relative import in Sass/Scss files, i have to use code like @import "../../../../../styles/variables/_variables.scss";

instead I want to use absolute import so i can import with code @import "styles/variables/_variables.scss";

I know one way to acheve so is to update options

{
   loader: "sass-loader",
   options: {
        includePaths: ["absolute/path/a", "absolute/path/b"]
 }

but I want to do it without ejecting, how can i do it? using react-app-rewired?

[fbarbare]

@Timer This is an issue when using SCSS files from NPM packages where they also get SCSS files from other packages.

A very good example is @material: You will need to import their SCSS like so:

@import '~@material/button/mdc-button';

But inside their SCSS file they have:

@import "@material/ripple/common";
@import "@material/ripple/mixins";
@import "./mixins";
@import "./variables";

So the build breaks as they do not have the ~. On their side, it makes sense as that’s how SASS works. But sass-loader makes it complex as they need the ~ to go look inside the node_modules.

For CRA, including this option fixes this problem (tested on my local):

includePaths: ["node_modules"]

[justo]

I’m successfully using absolute imports with ~ and NODE_ENV set in .env

/.env:

NODE_PATH=src/

given that /src/styles/variables.scss exists, in any .scss file:

@import ~styles/variables`

works fine with in v2.0.