Open6

nextjsでCORE UIを動かすまで

CORE UI Reactのintroductionに従って進む
ref: https://coreui.io/react/docs/4.0/

# コンポーネントのインストール
## npm
npm install @coreui/react@next
## yarn
yarn add @coreui/react@next

cssのインストール

# Core UI
npm install @coreui/coreui@next

# Bootstrap
npm install bootstrap@next

公式通りに pages/_app.js にcssのタグを埋め込む

pages/_app.js
import '@coreui/dist/css/coreui.min.css'
import 'bootstrap/dist/css/bootstrap.min.css'

コンパイルエラーが出てしまう

wait  - compiling...
error - ./pages/_app.js:2:0
Module not found: Can't resolve '@coreui/dist/css/coreui.min.css'
  1 | import '../styles/globals.css'
> 2 | import '@coreui/dist/css/coreui.min.css'
  3 | import 'bootstrap/dist/css/bootstrap.min.css'
  4 | function MyApp({ Component, pageProps }) {
  5 |   return <Component {...pageProps} />

nodemodulesの中を見ると、@coreuiの中にdistがないことがわかる

 → ls node_modules/@coreui/
coreui  react

@coreui/coreui/dist/... に直すと期待通りに動く

pages/_app.js
// before
// import '@coreui/dist/css/coreui.min.css'
import '@coreui/coreui/dist/css/coreui.min.css'

コンポーネントも期待通りに表示することができた :+1:

pages/index.js
import { CButton } from '@coreui/react';

export default function Home() {
  return (
    <div className={styles.container}>
      <CButton color="primary">
        Primary
      </CButton>
    </div>
  )
}
作成者以外のコメントは許可されていません