Kruemelkatze/! Theming Ant Design with Sass and Webpack.md

## ! Theming Ant Design with Sass and Webpack.md

      
    Raw
  

              ! Theming Ant Design with Sass and Webpack.md
            
          
    Theming Ant Design with Sass and Webpack

This is a solution on how to theme/customize Ant Design (which is written in Less) with Sass and webpack. Ant itself offers two solutions and a related article on theming, but these are only applicable if you use Less, the antd-init boilerplate or dva-cli.
What this solution offers:


use a single sass-file to customize (no duplicate variables for your project and Ant)
hot reload compatibility
no dependencies on outdated npm modules
easy integration with your existing webpack setup (webpack 3+ tested)

Any downsides?


all ant-styles are imported

According to our observations this does not have that much impact in practice, as using only a couple of Ant components will already result in most styles being loaded.
Procedure

The main procedure is as follows:

Define your variables in variables.scss
Write a ant.less file which imports the Ant less-styles and your sass-variables (yes)
Tell webpack to load less files via less-loader
Tell webpack to rewrite sass-files which are imported from less-files ($something -> @something)
Import ant.less in your project.

How?

Apply the changes / create the files as shown below. The changes should be self-explanatory. Just keep in mind, that your exact webpack-setup may differ a bit from the one given below.

Authors: Kruemelkatze, mrukas

  
## .babelrc
//Use .babelrc or add the options to the webpack loader
//Remove comments in .babelrc as they most likely will produce build errors
{
    "presets": [
        //...
    ],
    "plugins": [
        //...
        ["import", {
            "libraryName": "antd",
            "libraryDirectory": "es" //or "lib" for default
            //No "style" setting
        }]
    ]
}

## ant.less
@import "~antd/dist/antd.less";
@import "variables.scss"; // <-- SASS in a LESS file!

## app.jsx
// Import the ant.less file in your project
import 'ant.less';

## sassVarsToLess.js
// This loader will simply replace all $something sass-variable with @something less-variables
module.exports = function (source) {
    return source.replace(/\$/ig, '@');
};

## variables.scss
// THIS FILE SHOULD ONLY CONTAIN VARIABLE DEFINITIONS

// Ant Colors & Styles can be overwritten here. Just use the variable names from
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

// Be sure to use $xyz, not @xyz!
$primary-color: crimson;

## webpack.config.js
module: {
  rules: [
    {
      loader: 'babel-loader',
      test: /\.jsx?$/,
      // Other settings, like include or exclude
      options: {
        presets: [
          //...
        ],
        plugins: [
          // ...
          // Importing Ant here is not needed if you are using a .babelrc file
          ['import', {
            "libraryName": "antd",
            "libraryDirectory": "es" // or "lib" for default
            // No "style" setting
          }],
        ]
      },
    },
    // ...
    // Include less-loader (exact settings may deviate depending on your building/bundling procedure)
    {
      test: /\.less$/,
      use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
          loader: "less-loader",
          options: {
            javascriptEnabled: true //This is important!
          }
        }
      ]
    },
    // Tell the DEFAULT sass-rule to ignore being used for sass imports in less files (sounds weird)
    {
      test: /\.scss$/,
      issuer: {
        exclude: /\.less$/,
      },
      // ... other settings
    },
    // Define a second rule for only being used from less files
    // This rule will only be used for converting our sass-variables to less-variables
    {
      test: /\.scss$/,
      issuer: /\.less$/,
      use: {
        loader: './sassVarsToLess.js' // Change path if necessary
      }
    },

    // ...
  ]
}
	//Use .babelrc or add the options to the webpack loader
	//Remove comments in .babelrc as they most likely will produce build errors
	{
	"presets": [
	//...
	],
	"plugins": [
	//...
	["import", {
	"libraryName": "antd",
	"libraryDirectory": "es" //or "lib" for default
	//No "style" setting
	}]
	]
	}
	@import "~antd/dist/antd.less";
	@import "variables.scss"; // <-- SASS in a LESS file!
	// Import the ant.less file in your project
	import 'ant.less';
	// This loader will simply replace all $something sass-variable with @something less-variables
	module.exports = function (source) {
	return source.replace(/\$/ig, '@');
	};
	// THIS FILE SHOULD ONLY CONTAIN VARIABLE DEFINITIONS

	// Ant Colors & Styles can be overwritten here. Just use the variable names from
	// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

	// Be sure to use $xyz, not @xyz!
	$primary-color: crimson;
	module: {
	rules: [
	{
	loader: 'babel-loader',
	test: /\.jsx?$/,
	// Other settings, like include or exclude
	options: {
	presets: [
	//...
	],
	plugins: [
	// ...
	// Importing Ant here is not needed if you are using a .babelrc file
	['import', {
	"libraryName": "antd",
	"libraryDirectory": "es" // or "lib" for default
	// No "style" setting
	}],
	]
	},
	},
	// ...
	// Include less-loader (exact settings may deviate depending on your building/bundling procedure)
	{
	test: /\.less$/,
	use: [
	{ loader: "style-loader" },
	{ loader: "css-loader" },
	{
	loader: "less-loader",
	options: {
	javascriptEnabled: true //This is important!
	}
	}
	]
	},
	// Tell the DEFAULT sass-rule to ignore being used for sass imports in less files (sounds weird)
	{
	test: /\.scss$/,
	issuer: {
	exclude: /\.less$/,
	},
	// ... other settings
	},
	// Define a second rule for only being used from less files
	// This rule will only be used for converting our sass-variables to less-variables
	{
	test: /\.scss$/,
	issuer: /\.less$/,
	use: {
	loader: './sassVarsToLess.js' // Change path if necessary
	}
	},

	// ...
	]
	}