how to inject storybook with Environment Variables - variables

Question

{
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 9001 -c .storybook ",
},
"dependencies": {
...
},
"devDependencies": {
"#sambego/storybook-styles": "^1.0.0",
"#storybook/addon-actions": "^4.1.7",
"#storybook/addon-info": "^4.1.7",
"#storybook/addon-knobs": "^4.1.7",
"#storybook/addon-links": "^4.1.7",
"#storybook/addon-notes": "^4.1.7",
"#storybook/addon-viewport": "^4.1.7",
"#storybook/addons": "^4.1.7",
"#storybook/react": "^4.1.7",
"autoprefixer": "7.1.1",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react-app": "^3.0.2",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.3.1",
"css-loader": "^0.28.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^3.2.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-flexbugs-fixes": "3.0.0",
"postcss-loader": "2.0.6",
"react-styleguidist": "^5.5.7",
"react-svg": "^6.0.21",
"react-svg-loader": "^2.1.0",
"storybook-addon-jsx": "^6.0.0",
"storybook-readme": "^4.0.5",
"style-loader": "^0.16.1",
"uglifyjs-webpack-plugin": "^0.4.3",
"url-loader": "^0.5.8",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-middleware": "^3.5.1",
"webpack-dev-server": "^3.1.14"
},
"babel": {
"presets": [
"react-app"
]
},
}`
this is my package.json ,i use 'STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook' cmd,but it didn't work. this is storybook official website to explain the using of Environment Variables.,did i use it in the wrong way?

Answer 1

Storybook will not pull in env variables that do not start with STORYBOOK_
To workaround this you can do a 1:1 mapping of your existing env variables in .storybook/main as part of your configuration object.
env: (config) => ({
...config,
REACT_ENV_VARIABLE: process.env.REACT_ENV_VARIABLE,
OTHER_VARIABLE: process.env.OTHER_VARIABLE,
}),
This will allow you to use these env variables inside stories like you would inside the rest of your code through the standard process.env.REACT_ENV_VARIABLE
Related documentation https://storybook.js.org/docs/react/configure/environment-variables

Answer 2

this Q has been figured out.I'm using windows system,i have to input 'set STORYBOOK_THEME=red 'to set the Environment Variables,and then i can get this var by 'process.env.STORYBOOK_THEME'.
i changed the script as follow:
"scripts": {
"book": "set STORYBOOK_THEME=red&&start-storybook -p 9001 -c .storybook"
}
it works!