What is the algorithm for screwing React / Vue to the layout?

Question

Frontend

Given: now I'm building websites using Pug, Sass, building with Gulp, everything. It turns out static layout. I'm slowly tinkering with front-end frameworks where "pure" HTML and CSS are used in components.
Actually, the question is: as I understand it, first, roughly speaking, I need to make a static layout using the same Pug, Sass, and then ctrl + C ctrl + V insert the resulting HTML and CSS into React components. Did I get the point right? Explain the algorithm for "turning" layout into a web application.

Answer 1

Look at the manual - everything is written there in Russian in an understandable language.
In Vue, for example, you can build on any template engine (for example, pug) using any preprocessors (for example, sass) right in the components themselves.

Answer 2

Here, on the contrary, the layout is screwed to the framework)
IMHO, the easiest way is to set up the assembly of Sass, Pug via Webpack (It will still be needed to work with the framework). Then you don't have to move anything.
Another way is to transfer layout to components one at a time. Classes, decorations, grid, ...
Yes, CSS can be simply included with Gulp-built or transferred. But you will have to transfer constantly, if there are improvements.
In order not to create a mess, I would recommend simply moving the layout/style assembly to Webpack

Answer 3

Did I get the point right?

Wrong. It will be double work. It’s easier and more correct to immediately make up using a framework.