Gatsby: Using absolute instead of relative paths

[loganpowell]

I would like to use absolute paths instead of relative paths in Gatsby if it's possible.

For example, in the tutorial for using component css

import React from "react";

import Container from "../components/container";

export default () => (
  <Container>
    <h1>About CSS Modules</h1>
    <p>CSS Modules are cool</p>
  </Container>
);

instead of using ../components... I would like to use src/components/...

I've done some google'ing, but haven't been able to figure it out. I've used .env file in the past with create-react-app. Is there a way to edit the .babelrc file in Gatsby or some other way to accomplish this?

[ghost]

Me too (see https://github.com/gatsbyjs/gatsby/issues/3322 for images)

Espacially in large projects with a deep directory structure absolute paths are easier to understand

[dustinhorton]

Check out gatsby-plugin-resolve-src by @alampros. Would that work? Wouldn't be src/components/... but rather components/..., which I find preferable.

I'd love something similar for Sass. I haven't spent too much time digging for something better, but right now I do the following in gatsby-node.js:

const path = require('path')

exports.modifyWebpackConfig = ({ config, _stage }) => {
  return config.merge({
    resolve: {
      alias: {
        styles: path.resolve(config._config.context, 'src/styles'),
      },
    },
  })
}

…which allows for imports like this in Sass:

@import '~styles/variables`

…as opposed to what's required currently:

@import 'src/styles/variables`

[loganpowell]

That'll work! Thank you @dustinhorton!

[CMCDragonkai]

@dustinhorton That doesn't seem to work for CSS url(...). It still requires relative imports. Is there a way to make the CSS url(...) work from a given directory?

[dustinhorton]

@CMCDragonkai Good question…I don't think I've run into that as any assets I've used I've been able to import into the component itself, but I'm bound to run into this too.

[azamatsmith]

I've been using this plugin, and it seems to work great.

https://github.com/alampros/gatsby-plugin-resolve-src

[dustinhorton]

@azamatsmith And when using that, how're you referencing local assets in CSS? Or were you just re-affirming my comment @ https://github.com/gatsbyjs/gatsby/issues/3348#issuecomment-354183282?

[alampros]

@CMCDragonkai - I think this is one of those old annoyances with webpack@v1 that we will have to live with until gatsby gets up to speed.

IIRC, old webpack might resolve url() paths if you set them to a SCSS variable first, and _then_ assign them to a property:

$bg-image: 'url(~images/bg.png)';
.elem {
  background-image: $bg-image;
}

(disclaimer: I could be totally misremembering this)

Also, dumb question: have you checked that you have url-loader configured correctly for the file you're trying to load? I often forget to set the include option for the loader rule.

[dustinhorton]

@alampros Thanks for the awesome work on gatsby-plugin-resolve-src.

I tried your proposed solution, but couldn't get it to work, at least in my project. FWIW, relative imports don't need that variable usage.

[hoodsy]

btw for gatsby v2 you'll need to install the latest version: yarn add gatsby-plugin-resolve-src@next

https://github.com/alampros/gatsby-plugin-resolve-src/issues/7

[dustinhorton]

And alternatively there is gatsby-plugin-root-import.

[egorzekov]

In case you struggling with setting up absolute imports in .scss files and all plugins like gatsby-plugin-root-import don't help you, the following solution should help (personally for me):

In your gatsby-config.js file:
Instead of:

plugins: [
 ...
`gatsby-plugin-sass`,
 ...
]

Use the following:

plugins: [
 ...
 {
      resolve: `gatsby-plugin-sass`,
      options: {
        includePaths: ["src", "src/styles"],
      },
 },
 ...
]

Then, in any .scss file:

@import 'styles/colors';

...

Please note that plugins like gatsby-plugin-root-import are still necessary for setting up absolute imports in .js files.