All Articles

set up root-path in Gatsbyjs.

I want..

import Layout from '../../../../components/layout'
import Layout from 'src/components/layout'

gatsbyjs에서 depth가 길어지면 참고하고있는 상위 component 들은 ../../ 상대적으로 들어가야한다. ../../ 2개정도면 어찌해볼수있겠으나, 많으면 힘들다. 2개이상일경우는 절대path를 설정하는법을 알아보자.


npm install --save-dev gatsby-plugin-root-import
yarn add --dev gatsby-plugin-root-import

2가지중 npm패키지를 사용하던 yarn으로 사용해서 설치하자


gatsby-config.js 에서

module.exports = {
  plugins: [ 


기본설정은 src 로 설정되어있다.

Webpack v4 drops resolve.root in favor of resolve.alias found here.
If no options are specified, the plugin creates a default alias of src to your project src folder.
This means you should be able to import modules like such:

만약 바꾸고자한다면

const path = require('path')
module.exports = {
  plugins: [
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
        pages: path.join(__dirname, 'src/pages')

출처 및 참고

Loading script...