Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #1007
Closed
Open
Issue created Nov 04, 2016 by Administrator@rootContributor

Add SASS documentation

Created by: tsironis

Adding SASS (or Less) support in a project bootstrapped using create-react-app, doesn't require any advanced modifications. It's seems more intimidating than it actually is. We don't even have to eject.

First, install preprocessor of your choice. SASS seems the most popular weapon of choice at the moment, so we'll use it as an example:

npm install node-sass --save-dev

Then in package.json just add the following lines:

"scripts": {
   ...
   "build-css": "node-sass src/sass/base.scss src/index.css",
   "watch-css": "node-sass src/sass/base.scss src/index.css -w",
   ...
}

and run them alongside main scripts, by adding npm run watch-css & to start script and npm run build-css && to build.

  "scripts": {
    "start": "npm run watch-css & react-scripts start",
    "build": "npm run build-css && react-scripts build",
    "build-css": "node-sass src/sass/base.scss src/index.css",
    "watch-css": "node-sass src/sass/base.scss src/index.css -w",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

As far as I'm concerned, that works using Less as well.

Is that something that would belong in current documentation?

Assignee
Assign to
Time tracking