react-toolbox / react-toolbox-themr

A tool to statically extract and generate custom themes for React Toolbox

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't resolve theme

will-moore opened this issue · comments

Hi, I'm having trouble getting started:

Starting a new project...

$ create-react-app toolbox-test-app
$ npm install --save-dev react-toolbox react-toolbox-themr

Edited package.json adding config exactly as in https://github.com/react-toolbox/react-toolbox-themr#usage

"reactToolbox": {
  "include": [
    "BUTTON",
    "DATE_PICKER"
  ],
  "customProperties": {
    "animation-duration": "0.3s",
    "color-accent": "var(--palette-pink-a200)",
    "color-accent-dark": "var(--palette-pink-700)",
    "color-primary-contrast": "var(--color-dark-contrast)",
    "color-accent-contrast": "var(--color-dark-contrast)"
  },
  "output": "assets/react-toolbox"
}

and

"toolbox": "react-toolbox-themr"

Then created theme...

$ npm run toolbox

Added to index.js, including:

import theme from 'assets/react-toolbox/theme'

When I try to npm start I see

Module not found: Can't resolve 'assets/react-toolbox/theme' in '/Users/wmoore/Desktop/TREE/toolbox-test-app/src'

I pushed everything to https://github.com/will-moore/toolbox-test-app

Many thanks!

commented

The default JSON output value is wrong in the current version.

Change

"output": "assets/react-toolbox"

to

"output": "src/assets/react-toolbox"

Doing this will allow you to import using

import theme from './assets/react-toolbox/theme'


You could just remove the output key value entirely, and the default import per the README...

output: Path where both Javascript and CSS files will be generated. Aliased as -o. Defaults to src/toolbox.

So you should be able in this case to import with

import theme from './toolbox'

Great, thanks.
That fixed it: commit: will-moore/toolbox-test-app@781760b