事前準備

bash

# 追加
yarn add import-glob-loader --dev

webpack追加

webpack.config.js

const webpack = require('webpack')

const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ['import-glob-loader']
      }
    ],
  },
  // import React　from 'react'書かなくていい！
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react'
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
}

module.exports = webpackConfig

これでsassのまとめてインポートができます。やったね！

index.scss

/* ~ 略 ~ */

@import "./foundations/**/*";
@import "./layouts/**/*";
@import "./objects/**/*";

JSXの相対path地獄もこれで改善

import AppLayout from "../../components/app-layout"
↓
import AppLayout from "@/components/app-layout"

ちなみにstyled-componentsを採用しようと思ったんですが、ビルドうまくいかなかったです。。gununu