Ant Design with sass in React with create-react-app

Question

I'm trying to use Ant design with sass on my React project using antd-scss-theme-plugin but all I can find on the web is a configuration using Webpack. My project has been made with create-react-app and I shouldn't worry about webpack configuration. In fact, I don't have any webpack config file that I manage myself.

I have installed antd and node-sass-chokidar with npm and followed the configurations. All work. I can import ant components and use them, and I can use sass too. With a watch-css script, my css is automatically compiled and I can see the modifications in real time.

Now I'd like to override the less components of ant design with my sass files but as I said, the only help I can find online and the only package that I know of is for a webpack project.

Does anybody used antd-scss-theme-plugin with create-react-app or know how to deal with the configuration ?

Here is some of my configurations file :

.babelrc :

{
  "presets": ["env"],
  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
}

config-overrides.js :

const { injectBabelPlugin } = require('react-app-rewired')

module.exports = function override(config) {
  injectBabelPlugin(
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
    config,
  )
  return config
}

package.json :

    {
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.8.0",
    "antd-scss-theme-plugin": "^1.0.7",
    "connected-react-router": "^4.3.0",
    "history": "^4.7.2",
    "material-icons-react": "^1.0.2",
    "node-sass-chokidar": "^1.3.3",
    "npm-run-all": "^4.1.3",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-app-rewired": "^1.5.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-prop-types": "^1.0.4",
    "react-scripts": "1.1.4",
    "recompose": "^0.27.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-import": "^1.8.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "eslint-plugin-react-redux": "^2.3.0",
    "prettier": "^1.14.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-app-rewired start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-app-rewired build",
    "build": "npm-run-all build-css build-js",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
    "format": "prettier --write \"src/**/*.js\"",
    "lint": "eslint ."
  }
}

Thanks for all your future answers ;) !

Answer 1

I had the same problem and eventually how I managed to solved this way:

1. Install less globally

npm install -g less

2. Create a main.less file and include antd.less in it

3. Redeclare the default variables you want to override

main.less:

// main.less 
@import 'node_modules/antd/dist/antd.less 
@primary-color: #CA6027; // primary color for all components
@link-color: #5C987A; // link color

4. Compile main.less to css and include that file in CSS:

if your main.less is in src/styles, then:

lessc "./src/styles/main.less ./src/styles/css/antd.css" --js

css output will be:

./src/styles/css/antd.css

Now just include this generated antd.css in your app.js. And the new styles you override will be applied :) Same goes for scss.

Answer 2

I have my old project running with SASS, CRA, and Antd using below config setup. But If you go to official Antd website, they have now an updated tutorial for configuring Antd with Create React App. But in any case, what they have explained is its usage with less and not sass, so to use sass in your project you have to combine both CRA sass setup and Antd theme customization to make things work.

Here's a sample from my project where I used the less plugin to update/customize Antd theme. You should create a custom-override.js file in the root directory of your project and add these lines of code

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
// you can also use craco instead of customize-cra, 
// which is now the most updated way in their current docs.

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),

  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#6237a0',
      '@link-color': '#6237a0',
      '@success-color': '#0ea70e',
      '@steps-nav-arrow-color': '#d1cdd6',
    },
  }),
);

Then you just need to work with scss the normal way as you would do in sass based CRA project.

To use Sass, first install node-sass:

npm install node-sass --save
# or
yarn add node-sass

Then just update your code and rename App.css to App.scss and import the same in the main(app.js) file. You can even extend the code by doing sass imports/defining variables etc ( all things that you can do with sass).

Here's a snapshot of my app.scss where all my styles are defined in the styles folder.

/*
Variable definition 
*/
@import 'styles/variable';



/*
common style import 
*/
@import 'styles/common';



/**
*
# # # # # # # # # # # # # # # # # # # # # # # # # # # #
# # # # #       Components styles import    # # # # # #
# # # # # # # # # # # # # # # # # # # # # # # # # # # #
*
* below I do imports for all my routes and components.
*/

@import 'styles/dashboard';
@import 'styles/details';