common.scss file gets re-compiled/added multiple times with each successive block

[khoallaby]

When generating the compiled css files, ( ie both blocks.editor.build.css and blocks.style.build.css )... the compiler seems to include the common.scss file, once for every single block that is added. this results in gigantic files, the more blocks you have

to reproduce....

1. create a fresh install of CGB
2. duplicate the /src/block/ folder a couple times, so there are block2, block3 folders, etc
3. add these to the blocks.js file as usual like so

import './block/block.js';
import './block2/block.js';
import './block3/block.js';

4. optional.. modify each block's style.scss to make sure each block's css gets pulled in once, (it does)
5. run compiler, and check the compiled css in dist/*.css

example output of blocks.style.build.css

notice how the individual block's style.scss files are included once (which is expected).... but for EVERY block, the common.scss file is included AGAIN, instead of just ONCE overall

 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.

 ..... this css is from the common.scss file, which gets included multiple times if there are multiple blocks loaded/compiled together
*/
body {
  background-color: white; }

/**
 * 11111
 */
.my-block1 {
  color: red; }
/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.

 ..... this css is from the common.scss file, which gets included multiple times if there are multiple blocks loaded/compiled together
*/
body {
  background-color: white; }

/**
 * 22222
 */
.my-block2 {
  color: blue; }
/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.

 ..... this css is from the common.scss file, which gets included multiple times if there are multiple blocks loaded/compiled together
*/
body {
  background-color: white; }

/**
 * 3333333
 */
.my-block3 {
  color: green; }

here is the example ive created above: my-block.zip

[khoallaby]

you can actually see the same thing happening in your examples as well: https://github.com/ahmadawais/create-guten-block/blob/b8fbdbcf2f1b9db4918eb933d630777027ed3de8/examples/03-multi-block/dist/blocks.style.build.css

notice the duplicated #.# Common SCSS comments that occur over and over

[trongcong]

up, same issue :))

[trongcong]

I found a temporary solution to this problem.

1. Create a folder, I named it styles

2. In the styles directory include file editor.scss (styles for backend editor), style.scss (styles for frontend+backend editor), index.js (only include import scss file).
3. Then import blocks.js file like a normal block

---

Now in the file common.scss should only leave variables, mixins. All styles in common.scss file should be moved into styles/style.scss file. You can override styles in the backend editor by writing styles/editor.scss file.

It's done!