3. NextJS + React + Semantic-UI

NextJS + React + Semantic-UI

  • 梵
    administrators

    項目使用Semantic-UI，其實可以直接用semantic-ui-css  但是它不支持自定義build，也就是所以css都是定義好了，你只能直接用，或者用override 的方法。
    另外一種方法是用‘Fomantic-UI ', 不爽的是這麼一來我的package.json又開始臃腫了。

      "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next-compose-plugins": "^2.2.0",
    "semantic-ui-react": "^0.88.1",
    "styled-components": "^4.3.2"
  },
  "devDependencies": {
    "file-loader": "^4.1.0",
    "fomantic-ui": "^2.7.8",
    "url-loader": "^2.1.0"
  }

    以上除了semantic-ui-react，其他都是為了可以用自定義主題而增加的。
    另外，還有

    • pages/_app.js
    • pages/_document.js
    • next.config.js
    • semantic.json

    另外在package.json裡加上一些scripts：

        "now-build": "npm run semantic:build && next build",
    "semantic:build": "cd .semantic && gulp build-css build-assets",
    "semantic:watch": "cd .semantic && npm run semantic:build && gulp watch",

    請到這裡下載這些文件：https://github.com/skydiver/nextjs-semantic
    之後，run

    npm install
npm run semantic:build
npm run dev

    這樣就差不多了。

    0
nextjs 3