title: How to inject dotenv variables without REACT_APP prefix in create-react-app?
body: <p>I have a project to migrate from legacy React app to standard <code>create-react-app</code> one (not ejected).</p>
  
  <p>In legacy project, it manually loads <code>.env</code> files with <code>dotenv</code> and <code>dotenv-expand</code> and injects through webpack <code>DefinePlugin</code>.</p>
  
  <p><code>create-react-app</code> intuitively supports <code>dotenv</code> but can only recognize variables with <code>REACT_APP_</code> prefix.</p>
  
  <p>There are so many places in legacy code also along with imported packages in other repositories that are using <code>process.env.xxx</code> variables, so it is impossible for now to rename them with prefix before migration.</p>
  
  <p>In this case, how can I make <code>create-react-app</code> recognize dotenv variables without <code>REACT_APP_</code> prefix?</p>
  
  <p>BTW, I tried to <code>rewire</code> build script before with some simple customizations over webpack, like bundling js and css:</p>
  
  <pre><code>const path = require('path');
  const rewire = require('rewire');
  const defaults = rewire('react-scripts/scripts/build.js');
  
  let webpackConfig = defaults.__get__('config');
  
  webpackConfig.output.filename = 'static/js/[name].js';
  webpackConfig.optimization.splitChunks = { cacheGroups: { default: false } };
  webpackConfig.optimization.runtimeChunk = false;
  webpackConfig.plugins.find(plugin =&gt; plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.filename = 'static/css/[name].css';
  webpackConfig.plugins.find(plugin =&gt; plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.moduleFilename = () =&gt; 'static/css/[name].css';
  </code></pre>
  
  <p>But it seems <code>dotenv</code> and <code>DefinePlugin</code> are more complicated. Not sure if it can be achieved in the same way.</p>