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

[gudh]

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?

[miraage]

Start read from #4195 (comment)

I think implementation is not that complex. @gaearon @Timer what do you think of re-using NODE_PATH as SCSS includePaths?

[Timer]

I'm good with adding NODE_PATH, but I have hesitations about its implications; afaik it's suggested not to use includePaths in the sass-loader docs.

[miraage]

@Timer kinda weird. I have been using this option for years, works like a charm.
I can open a PR if you're okay with that.

[Timer]

See webpack-contrib/sass-loader#556 (comment) and webpack-contrib/sass-loader#558 (comment), I'm not sure if they're relevant or not. Does ~ work?

[bugzpodder]

I was using NODE_PATH just fine with: @import "styles/footer.scss"; in my scss file.

modified:   footer.scss
Untracked files:
	../../styles/footer.scss
> cat footer.scss 
@import "styles/footer.scss";

[jimbojetlag]

Is this issue related to #4651?

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

[MarkLunney]

@justo This is fine when you have full control over the scss files. It won't work for existing component libraries that don't support the ~ syntax for imports.

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

[teknee]

I agree with @fbarbare. I have the same issue with @material. I extended the getStyleLoaders function to take an options object with included includePaths: ["node_modules"]. This worked well for my project.

I understand the philosophy of the project is to prefer convention over configuration. The default behavior works for most cases. However, there are situations where the default behavior does not work. Either, this is enabled by default or put behind a feature flag considering the issues mentioned above by @Timer. Thoughts?

[Vilvalas]

I am facing the same issue with @Material. Is there any way to solve this without ejecting?