React configurations

gatsby-antd.jsx

// Gatsby + Ant Design + Less

// gatsby-config.js plugins

{
  resolve: `gatsby-plugin-less`,
  options: {
    javascriptEnabled: true,
    modifyVars: {
      hack: `true; @import "${__dirname}/src/components/antd.less";`,
    },
  },
},

// .babelrc
  
{
  "presets": [["babel-preset-gatsby"]],
  "plugins": [
    [
      "import",
      { "libraryName": "antd", "libraryDirectory": "es", "style": true }
    ]
  ]
}

// src/components/antd.less
  
@font-size-base: 16px;

react-uikit.jsx

// React + UIkit

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'

const Layout = ({ children }) => {
  useEffect(() => {
    ;(async (x) => {
      const UIkit = (await import('uikit/dist/js/uikit.js')).default
      const Icons = (await import('uikit/dist/js/uikit-icons.js')).default
      UIkit.use(Icons)
    })()
  })

  return (
    <>
      <main>{children}</main>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout