What is the best way to organize work with css, on webpack and php back?

Question

css

Hello!
I used to sit on a gallop, but it seems to me that the assembler is certainly good, even excellent, but now it’s not about him at all, but about WebPack.
There is a server (which generates essentially static html pages, on Laravel 5.3++). Composite blocks are scattered from resources/views and further into folders, which are assembled into a finished page according to certain routes.
JS I divided into something similar, (suppose we know the current sections of the site, and the future ones will pass through us and we will write code for them (front). And we will create a kind of routing. And our entry point into the application. Consisting of 1 js. Its task is to get the current url and call the main js file special for it, via require.ensure.He, in turn, connects the necessary components, libraries, etc. depending on the
needs.I also want to use PostCSS with ModuleCss on the project.But how to use this modularity?If the main rendering of the page is done by Laravel (a certain php framework, with its own blade.php templates).

'use strict';

import styles from './css/main.css';

module.exports = function() {
  let page = document.querySelector('.page');
  page.innerHTML = '<p class="'+ styles.page + '">параграф, со стилями из main.css, класса page</p>';
};

If you do this, then everything is clear, the webpack itself will create the necessary css, add prefixes and it will be fine.
Problems and my thoughts on their solution:
1. How to start modular work with KSS?
It is possible to generate a json file that will collect something similar to:

{
  "title": "_title_xkpkl_5 _title_116zl_1",
  "article": "_article_xkpkl_10",
}

как показано в офф. примерах: https://github.com/css-modules/postcss-modules и исп хелпел, который при рендере будет обращаться к json файлу и заменять классы в верстке обновленными названиями? Кажется здесь все более менее.
2. Подгружать только нужные стили
Да, можно создать отдельную точку входа и собирать все ксс в него, но это бред какой то. Возможно ли как то показывать, что у этого блока есть стили, они должны подгрузить и не конфликтовать с другими. Главное здесь подгружать только нужное и асинхронно. И правильно ли это? Вот лог. путь до момента загрузки стилей:

1. Грузится стр.
   
2. Состоит из 1 или 2 js файлов, наш основной app.js, задача которого узнать куда обратился пользователь и начать подгружать нужный js. Второй js имеет повторяющейся код для всех стр.
   
3. The required js has loaded and started executing, ok, at the beginning we connect the necessary styles (taking into account the fact that we constantly have to monitor the correctness of the styles that we require from the elements that will be on the page, the logic of js and the template is separated).
   
4. And now the styles are applied.
   

There is another option, to inline the necessary style files into separate template components and when they are called, the necessary css will also be called. But here you also need to take into account modularity so that there is no overwriting of styles and what to do if one component is called 2 or more times ?
Please tell me, I got so deep into the theory that I am completely confused and cannot see the correct solution.
Thanks a lot

Answer 1

Зачем упрямо продолжать скрещивать бульдога с носорогом? Переходите на серверный JS и генерируйте так свою статику на сервере. И никаких проблем с модульностью. А тут вообще какой-то вынос мозга.