tachyons-and-react icon indicating copy to clipboard operation
tachyons-and-react copied to clipboard

Live-reloading CSS is possible without ejecting

Open wavebeem opened this issue 7 years ago • 0 comments

If you check out the preprocessor section for create-react-app you can see that it's actually possible to have live-reloading CSS with react-scripts without ejecting. Essentially the tachyons-cli is your "preprocessor" in this step.

{
  "name": "first-storybook",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "npm-run-all": "^4.0.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "tachyons": "^4.7.1"
  },
  "devDependencies": {
    "@kadira/storybook": "^2.21.0",
    "chokidar-cli": "^1.2.0",
    "react-scripts": "0.9.5",
    "tachyons-cli": "^1.0.11"
  },
  "scripts": {
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "build-css": "tachyons src/real-index.css > src/index.css",
    "watch-css": "chokidar src/real-index.css -c 'npm run build-css'",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  }
}

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

wavebeem avatar May 09 '17 21:05 wavebeem