# Remove loading css in production

**URL:** <https://forums.bitovi.com/t/remove-loading-css-in-production/590>\
**Category:** StealJS\
**Created:** [March 28, 2017, 9:56am UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590 "2017-03-28T09:56:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [March 28, 2017, 9:56am UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/1 "2017-03-28T09:56:44Z")

</div>

I’ve got to use this environment where I can copy/paste custom javascript and css. I’ve got 1 form for all javascript and 1 form for css.

So I’ve got this build.js  
var stealTools = require(‘steal-tools’);

```
stealTools.build({
        config: __dirname + '/package.json!npm'
    },
    {
        bundleSteal: true,
        debug:true,
        minify:false
    }
);

```

This indeed creates a standalone .js and .css  
Except the .js still has import statements for the css, which doesn’t work in this environment.

How do I set it up that I can still build both files, but without the reference to css in the final .js? Would this be possible?

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [March 28, 2017, 12:26pm UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/2 "2017-03-28T12:26:20Z")

</div>

I’ve tried using removeDevelopmentCode

build.js

```
var stealTools = require('steal-tools');

stealTools.build({
        config: __dirname + '/package.json!npm'
    },
    {
        bundleSteal: true,
        minify:false
    }
);

stealTools.build({
        config: __dirname + '/package.json!npm'
    },
    {
        dest: __dirname + '/dist/nocss',
        bundleSteal: true,
        minify:false,
        removeDevelopmentCode:false
    }
);

```

In main.js:

```
//!steal-remove-start
import 'styles/imports.css';
import 'styles/loading.css';
import 'styles/flex.css';
import 'styles/gsa_style.css';
//!steal-remove-end

```

To my surprise the code is built twice, but both with css included.  
So apparently the removeDevelopmentCode settings doesn’t have any effect

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [March 28, 2017, 2:37pm UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/3 "2017-03-28T14:37:36Z")

</div>

You can use steal’s `bundle` option to create separate bundles for your js and css files:

[http://stealjs.com/docs/StealJS.guides.progressive\_loading.html#update-bundles-to-build](http://stealjs.com/docs/StealJS.guides.progressive_loading.html#update-bundles-to-build)

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [March 28, 2017, 2:40pm UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/4 "2017-03-28T14:40:50Z")

</div>

But would’t the code to load the css still be in the javascript?

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [March 28, 2017, 2:58pm UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/5 "2017-03-28T14:58:13Z")

</div>

Yeah, you’re right, it would. You could [map](http://stealjs.com/docs/config.map.html#ignoring-optional-dependencies) the css files to `@empty` in production mode if that’s what you’re trying to do.

I’m not positive how that will affect the build output though. Not sure if the css file bundles will still be created with the actual CSS or not.

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [March 29, 2017, 8:56am UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/6 "2017-03-29T08:56:35Z")

</div>

I noticed it works if I remove the line System.bundles={…} in the generated js.  
Could it be possible to remove that line using streams? [https://stealjs.com/docs/steal-tools.streams.write.html](https://stealjs.com/docs/steal-tools.streams.write.html)  
From the documentation I don’t really understand how this should be used

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [March 29, 2017, 11:25am UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/7 "2017-03-29T11:25:11Z")

</div>

I’ve ‘solved’ it using an awk script that strips the references to the css-files from the result. Hey, it works.

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [March 29, 2017, 1:06pm UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/8 "2017-03-29T13:06:33Z")

</div>

A couple other options.

You could use `steal-conditional` to only load the css files in development. Here’s a guide for using steal-conditional: [http://stealjs.com/docs/StealJS.guides.boolean\_conditional\_loading.html](http://stealjs.com/docs/StealJS.guides.boolean_conditional_loading.html) . And you’d use `steal.isEnv('production')`, which is explained here: [http://stealjs.com/docs/steal.isEnv.html](http://stealjs.com/docs/steal.isEnv.html).

Another option is to not put the css `import` statements in your JS at all, and make them [meta](http://stealjs.com/docs/load.metadata.html) deps in the [envs](http://stealjs.com/docs/config.envs.html) config so they will load in development only.

---

<div class="post-metadata">

**Author:** ![Arjen\_Haayman](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Arjen\_Haayman](https://forums.bitovi.com/u/Arjen_Haayman)\
**Post date:** [March 29, 2017, 1:36pm UTC](https://forums.bitovi.com/t/remove-loading-css-in-production/590/9 "2017-03-29T13:36:02Z")

</div>

but would the generate the concatenated css?