Compile bootstrap scss seperatly

sage
1

Hello,

I would like to compile my custom styles seperately from the bootstrap scss.

With bootstrap, gulp needs 8 seconds to compile my styles. Without, it takes 0.97, so it would be much more comfortable to compile it seperatly while developing.

So, it would be perfect, if I had two compiled css files in development, and one in production.

What would be a good way to do this?

  • A dev_manifest.json, which is used in development only?
  • Is it possible, to have something like a _variables.scss which is imported to bootstrap and custom, so that bootstrap variables can be changed and be used everywhere
  • What would be a good way to embed it in lib/assets.php
  • Do you have other ideas?
2

See https://github.com/austinpray/asset-builder/tree/master/help.

3

I know that this is possible, but I`m searching for ideas on how to do this with minimum impact to bedrock/gulp config.
At the moment, I would need

  • A dev_manifest.json
  • A dev_styles task in gulpfile
  • A watch trigger to compile custom and main stylesheet seperatly
  • import _variables.scss in main (bootstrap and plugins) and custom (my code)
  • Include custom and main in assets.php

This is a lot of changes. I`m searching for simpler ways to decrease the style compile time…

4

You are overcomplicating things. You don’t need to touch gulp or Bedrock (not sure how Bedrock is related at all) at all.

Read over the manifest builder spec and help files I linked.

6

To be honest, instead of creating a whole new manifest and modifying the gulp file, why not just load 2 css files in production? Pretty sure nobody is going to be able to tell the difference in speed :wink:

7

2 files is not that easy, because a lot of the bootstrap variables/mixins are needed in our code. We gave up this idea.

1 Like