Craco Ant Design SCSS plugin

About

@igor-lemon/craco-antd-scss is a Craco plugin which allows you to use SASS/SCSS in your create-react-app ^5.0.0 projects with Ant Design.

The plugin based on @igor-lemon/antd-scss-theme-plugin and craco-less plugins.

Installation

• If you don't have craco you should to install it before.
• Install babel-plugin-import package.

Then install @igor-lemon/craco-antd-scss:

$ yarn add @igor-lemon/craco-antd-scss --save-dev

# OR

$ npm i @igor-lemon/craco-antd-scss --save-dev

How to use

Create theme.scss. It's file where you can override antd variables.
And modify your craco.config.js config file.

const CracoAntSCSSPlugin = require('@igor-lemon/craco-antd-scss');

module.exports = {
  plugins: [
    { 
      plugin: CracoAntSCSSPlugin, 
      options: { theme: './path_to/theme.scss' }
    }
  ],
};

For example put into theme.scss next variables

$primary-color: #92021F;
$link-color: #D3840D;

The list of variables you can find here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

Configuration options

theme

• Required. The path to the file with the variables you want to override.

lessOptions

Custom Less options. https://webpack.js.org/loaders/less-loader/#options
Default is {}

Set null if you don't want to apply @igor-lemon/antd-scss-theme-plugin to the Less loader.

sassOptions

Custom SASS/SCSS options. https://webpack.js.org/loaders/sass-loader/#options
Default is {}

Set null if you don't want to apply @igor-lemon/antd-scss-theme-plugin to the Less loader.

babelImportOptions

Babel Import plugin options.
Default:

{
  libraryName: 'antd',
  libraryDirectory: 'lib',
  style: true
}

Additional Features

The plugin allows to use Ant Design variables in your SASS/SCSS files.
If you want to use it feature just import theme.scss

Example:

@import "./path_to/theme";

.wrapper {
  background-color: $body-background;
  margin: $margin-md;
}

The disadvantage of this approach is that the IDE and linters doesn't see the values of these variables. It may not be so convenient to use them.

My advice is to just overwrite the used variables in theme.scss and set sassOptions option to null, this will reduce the rebuilding time.

const CracoAntSCSSPlugin = require('@igor-lemon/craco-antd-scss');

module.exports = {
  plugins: [
    { 
      plugin: CracoAntSCSSPlugin, 
      options: {
        sassLoaderOptions: null,
        theme: './path_to/theme.scss'
      }
    }
  ],
};

License

MIT