-
-
Notifications
You must be signed in to change notification settings - Fork 868
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ant Design with custom theme #470
Comments
After reading about
So here is my working // razzle.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractLess = new ExtractTextPlugin({
filename: '[name].[contenthash].css',
disable: process.env.NODE_ENV === 'development', // disabled during development
})
const antdTheme = require('./antdTheme') // Include variables to override antd theme
module.exports = {
modify: (config, { target, dev }, webpack) => {
return {
...config,
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: [['import', { libraryName: 'antd', style: true }]],
},
},
{
test: /\.less$/,
use: extractLess.extract({ // use the ExtractTextPlugin instance
use: [
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
modifyVars: antdTheme,
},
},
],
// use style-loader in development
fallback: 'style-loader',
}),
},
],
},
plugins: [
...config.plugins,
extractLess // <- Add the ExtractTextPlugin instance here
],
}
},
} |
Full example in #471 |
Thank you so much for this, I would like to note that this works well with |
@eduludi super amazing example, after failing to accomplish this myself, I got it running following your example! Question: Does this work with SSR? At the moment, the server rendered response that I get does show a button, for example, but only after the react bundle is loaded on the client, the ant.design styles kick in. |
@mbrochh so you hava any idea ? |
Background
I'm attempting to integrate Ant Design (
antd
) with Razzle. It's "working", but looks like I have an issue with the Webpack configuration, asantd
styles are not bundled in the css output file, but as inline css. This causes a styles flickering as the inline styles are loaded once the app is loaded.This is the production output:
And in
<head>
:Question
How can I bring the
antd
's and my app's styles together?Configuration
Dependencies:
antd
less
less-loader
babel-plugin-import
The text was updated successfully, but these errors were encountered: