Using absolute instead of relative paths

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?

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

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