Skip to content
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

customize-cra #28

Closed
jamesmstone opened this issue Jul 2, 2019 · 10 comments
Closed

customize-cra #28

jamesmstone opened this issue Jul 2, 2019 · 10 comments

Comments

@jamesmstone
Copy link

jamesmstone commented Jul 2, 2019

Hi,
Firstly thank you, this looks like a really useful tool.
For create-react-app projects is it possible to use this with customize-cra instead of react-app-rewired, as react-app-rewired is now only "lightly" maintained.

@jamesmstone
Copy link
Author

If so, it would be great to also update the create-react-app example!

@jamesmstone
Copy link
Author

jamesmstone commented Jul 2, 2019

Another alternative might be craco or in particular: craco-antd.

@mzohaibqc
Copy link
Owner

mzohaibqc commented Jul 3, 2019

@jamesmstone Here are some hints, try this and if it works, update here so others can benefit from your learning

https://github.com/arackaf/customize-cra#addwebpackpluginplugin

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
const {
  override,
  addWebpackPlugin,
  addLessLoader
} = require("customize-cra");
const options = {
  stylesDir: path.join(__dirname, './src/less'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/less/vars.less'),
  mainLessFile: path.join(__dirname, './src/less/main.less'),
  themeVariables: [
    '@primary-color',
  ],
  indexFileName: 'index.html',
  generateOnce: false // generate color.less on each compilation
}

module.exports = override(
  addLessLoader({
    modifyVars: {
      '@primary-color': '#00375B'
    },
    javascriptEnabled: true
  }),
addWebpackPlugin(new AntDesignThemePlugin (options))
);

@Dppatra
Copy link

Dppatra commented Jul 18, 2019

Screenshot from 2019-07-18 17-16-27

This one is not working in (customize-cra: 0.4.1)

@mzohaibqc
Copy link
Owner

@Dppatra You should have seen the docs. You are not using the correct case for function name. It is addWebpackPlugin and not addwebpackpluginplugin

https://github.com/arackaf/customize-cra/blob/master/api.md#addwebpackpluginplugin

@buquan
Copy link

buquan commented Feb 17, 2020

addwebpackpluginplugin is not a function@ @mzohaibqc

@mzohaibqc
Copy link
Owner

@buquan you should have seen the above comments. it's clearly saving it is addWebpackPlugin and not addwebpackpluginplugin.

https://github.com/arackaf/customize-cra/blob/master/api.md#addwebpackpluginplugin

@buquan
Copy link

buquan commented Feb 18, 2020

use addWebpackPlugin methods can't work , it maintains 'Starting the development server...'

@mzohaibqc
Copy link
Owner

@buquan I've not tried this my self, do some changes, see the docs, you may get success

@mzohaibqc
Copy link
Owner

@jamesmstone @buquan Here is a demo using customize-cra
https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

And here is code for this demo
https://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples/customize-cra

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants