<p dir="auto">I am deploying in an environment with multiple servers behind a load balancer. We current build on one server then move those files everywhere. How do I deal with instances where there are environmental specific variables in the package that will be deployed?</p>


<ul dir="auto">
<li>[ x] I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">I would envision a process where I can build the application on a build server and deploy that built application to all servers in my environment and between environments where the environment specific information like the api url to use could be parameter without the need to run yarn build on each environment at deploy time.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Today in the environment I deploy in, I have multiple environments. There is development, qa, staging, and production. Each environment have different variables like the URL of the server it's connecting to, which api it should use, or various keys to use for analytics. Today when we deploy, we run yarn install and build on each server that it's being deployed to except when deploying behind a load balancer. We build on the first server then SCP it over to the other servers. This keeps the build number in check and allows me to update config files with the appropriate values prior to building. If i were to build the file, then update the config, the updated configs would not reflected in the built package until I build again.</p>
<p dir="auto">I am curious if I did this how would i deal with the variables that are different between environments? Does a hard coded build number care of that even though I have modified the config.js file after having built it on a build server and overridden that build file?</p>
<h2 dir="auto">Context</h2>

<p dir="auto">My deploy process is messy and not very sustainable.</p>

<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td></td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<ul dir="auto">
<li>[X ] I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">Should be able to upgrade next 6 and still use styled-jsx with sass</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Working with next 5.1.0 upgrading to next 6 breaks importing a scss file to be used in styled-jsx<br>
example</p>
<p dir="auto">import style from './componentName.scss';</p>
<p dir="auto">in component: <code class="notranslate">&lt;styled jsx&gt;{style}&lt;/style&gt;</code></p>
<p dir="auto">On next 6 I get 'style is undefined'</p>
<p dir="auto">package.json<br>
"extract-text-webpack-plugin": "^3.0.2",<br>
"extracted-loader": "^1.0.3",<br>
"node-sass": "^4.7.2",<br>
"postcss": "^6.0.16",<br>
"postcss-cssnext": "^3.0.2",<br>
"postcss-loader": "^2.0.10",<br>
"sass-loader": "^6.0.6",<br>
"styled-jsx-css-loader": "^0.3.0"<br>
"styled-jsx-plugin-sass": "^0.2.2",<br>
"autoprefixer": "^8.2.0",</p>
<p dir="auto">babelrc</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &quot;presets&quot;: [
    [
      &quot;next/babel&quot;,
      {
       &quot;preset-env&quot;: { &quot;modules&quot;: &quot;commonjs&quot; }
      }
    ]
  ],
  &quot;plugins&quot;: [
    [
      &quot;styled-jsx/babel&quot;,
      { &quot;plugins&quot;: [
          [&quot;styled-jsx-plugin-sass&quot;, {
              &quot;sassOptions&quot;: {
                &quot;includePaths&quot;: [&quot;./styles&quot;],
                &quot;precision&quot;: 2
              }
            }
          ]
        ]
      }
    ]
  ]
}
```

next.config.js
```const ExtractTextPlugin = require('extract-text-webpack-plugin');

const dev = process.env.NODE_ENV !== 'production';
const path = require('path');
const getRoutes = require('./routes');

module.exports = {
  exportPathMap: getRoutes,
  webpack: (config) =&gt; {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]',
          },
        },
        'babel-loader',
        'styled-jsx-css-loader',
        'postcss-loader',
      ],
    });
    return config;
  },
};```
## Steps to Reproduce (for bugs)
&lt;!--- Provide a link to a live example, or an unambiguous set of steps to --&gt;
&lt;!--- reproduce this bug. Include code to reproduce, if relevant --&gt;
1.
2.
3.
4.

## Context
&lt;!--- How has this issue affected you? What are you trying to accomplish? --&gt;
&lt;!--- Providing context helps us come up with a solution that is most useful in the real world --&gt;

## Your Environment
&lt;!--- Include as many relevant details about the environment you experienced the bug in --&gt;
| Tech    | Version |
|---------|---------|
| next    |    6     |
| node    |      8.10.0   |
| OS      |    mac and windows     |
| browser |         |
| etc     |         |"><pre lang="{" class="notranslate"><code class="notranslate">  "presets": [
    [
      "next/babel",
      {
       "preset-env": { "modules": "commonjs" }
      }
    ]
  ],
  "plugins": [
    [
      "styled-jsx/babel",
      { "plugins": [
          ["styled-jsx-plugin-sass", {
              "sassOptions": {
                "includePaths": ["./styles"],
                "precision": 2
              }
            }
          ]
        ]
      }
    ]
  ]
}
```

next.config.js
```const ExtractTextPlugin = require('extract-text-webpack-plugin');

const dev = process.env.NODE_ENV !== 'production';
const path = require('path');
const getRoutes = require('./routes');

module.exports = {
  exportPathMap: getRoutes,
  webpack: (config) =&gt; {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]',
          },
        },
        'babel-loader',
        'styled-jsx-css-loader',
        'postcss-loader',
      ],
    });
    return config;
  },
};```
## Steps to Reproduce (for bugs)
&lt;!--- Provide a link to a live example, or an unambiguous set of steps to --&gt;
&lt;!--- reproduce this bug. Include code to reproduce, if relevant --&gt;
1.
2.
3.
4.

## Context
&lt;!--- How has this issue affected you? What are you trying to accomplish? --&gt;
&lt;!--- Providing context helps us come up with a solution that is most useful in the real world --&gt;

## Your Environment
&lt;!--- Include as many relevant details about the environment you experienced the bug in --&gt;
| Tech    | Version |
|---------|---------|
| next    |    6     |
| node    |      8.10.0   |
| OS      |    mac and windows     |
| browser |         |
| etc     |         |
</code></pre></div>