isomorphic-style-loader makes ugly style

Question

i create my own starterkit base on https://github.com/barbar/vortigern and all ok but i have one problem.

Usually when i want to connect all style to the App i'll do

import '../styles/scss/bundle.scss';

bundle.scss - contains all imports.

But in isomorphic case all some complicate.

.global {
  background: yellow;
  >.child {
    background: tomato;
  }
}

transform in:

.app_global_1pn {
  background: yellow; }
  .app_global_1pn > .app_qwe_FD8 {
    background: tomato; }

question 1: app_global_1pn - that name will remain forever? And i'm can use it like

<Tag className='app_global_1pn' />

question 2: Is there an solution without uglify style?

Answer 1

This behavior exists so that duplicate style names in multiple css modules don't cause conflicts with the generated CSS. If you don't want to use css modules, then you can always pre-compile your CSS and load it as a static .css file. But then you won't have the benefits of css-modules such as hot-reloading etc.