React-app-rewired: react-app-rewire-less do not work

Created on 22 Mar 2018  ·  4Comments  ·  Source: timarney/react-app-rewired

react-app-rewire-less looks like do not work.
when i use

import styles from "./index.less";

I can not get styles's value.

config-overrides.js
const { injectBabelPlugin } = require("react-app-rewired"); const rewireLess = require("react-app-rewire-less"); module.exports = function override(config, env) { config = injectBabelPlugin( ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }], config ); config = rewireLess(config, env); return config; };

"react-app-rewire-less": "^2.1.1",
"react-app-rewired": "^1.4.0",

Most helpful comment

@andriijas
but if i use react-app-rewire-less-modules,

E:\react\WSJB\client\node_modules\react-app-rewire-less-modules\index.js:18
          ...rule,
          ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\react\WSJB\client\config-overrides.js:2:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

config-overrides.js

const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less-modules");
module.exports = function override(config, env) {
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  );
  config = rewireLess(config, env);
  return config;
};

"react-app-rewire-less-modules": "^1.3.0",
"react-app-rewired": "^1.4.0"

All 4 comments

I don't use the package myself so can't offer much help but these instructions look different from what you have.

https://ant.design/docs/react/use-with-create-react-app#Customize-Theme

@andriijas @icopp @dawnmist do any of you know or have a working rewired antd setup that we can run travis ci on as things get updated? Would be helpful to ensure things are still working and also something to point people to.

I have this one setup for the MobX rewire - https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx

Another antd one here https://github.com/timarney/react-app-rewired/issues/218

@ljxyweb you are trying to use css modules with less which doesnt work with this less plugin. you can use older version of https://www.npmjs.com/package/react-app-rewire-less-modules with cra1 and newer version with cra2 alpha, css modules will ship in cra2 and it will be supported in this less plugin when cra2 ships.

@timarney i have a playground app here: https://github.com/andriijas/monkey-admin

@andriijas
but if i use react-app-rewire-less-modules,

E:\react\WSJB\client\node_modules\react-app-rewire-less-modules\index.js:18
          ...rule,
          ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\react\WSJB\client\config-overrides.js:2:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

config-overrides.js

const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less-modules");
module.exports = function override(config, env) {
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  );
  config = rewireLess(config, env);
  return config;
};

"react-app-rewire-less-modules": "^1.3.0",
"react-app-rewired": "^1.4.0"

Was this page helpful?
0 / 5 - 0 ratings