<p dir="auto">I'm trying to create monorepo which will contain components that are built with typescript and sass. Folder structure looks like this:</p>
<ul dir="auto">
<li>packages
<ul dir="auto">
<li>components
<ul dir="auto">
<li>src
<ul dir="auto">
<li>Slider
<ul dir="auto">
<li>Slider.ts (import 'Slider.scss')</li>
<li>Slider.scss</li>
</ul>
</li>
<li>Modal
<ul dir="auto">
<li>Modal.ts (import 'Modal.scss')</li>
<li>Modal.scss</li>
</ul>
</li>
</ul>
</li>
<li>webpack.config.js</li>
</ul>
</li>
<li>app1
<ul dir="auto">
<li>src
<ul dir="auto">
<li>index.ts (import Slider from <code class="notranslate">components/src/Slider/Slider</code>)</li>
</ul>
</li>
<li>webpack.config.js</li>
</ul>
</li>
<li>app2
<ul dir="auto">
<li>src
<ul dir="auto">
<li>index.ts (import Slider from <code class="notranslate">components/src/Slider/Slider</code>)</li>
</ul>
</li>
<li>webpack.config.js</li>
</ul>
</li>
</ul>
</li>
</ul>
<p dir="auto">I want to use components in app1 and app2. What I tried is building components with DllPlugin and referencing it in app1 and app2 with DllReferencePlugin, it works well for typescript files, but what about scss, images, fonts and other assets? When building app1 or app2, I want their dist folder to include all assets from components. The reason why I'm not importing directly components/src/Modal without dll plugin is that components folder may have different webpack configuration like alias for example. What's the best practice for accomplishing this?</p>
<p dir="auto">I'm trying to create monorepo which will contain components that are built with typescript and sass. Folder structure looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="- packages
    - components
        - src
            - Slider
                - Slider.ts (import 'Slider.scss')
                - Slider.scss
            - Modal
                - Modal.ts (import 'Modal.scss')
                - Modal.scss
        - webpack.config.js
    - app1
        - src
            - index.ts (import Slider from `components/src/Slider/Slider`)
        - webpack.config.js
    - app2
        - src
            - index.ts (import Slider from `components/src/Slider/Slider`)
        - webpack.config.js"><pre class="notranslate"><code class="notranslate">- packages
    - components
        - src
            - Slider
                - Slider.ts (import 'Slider.scss')
                - Slider.scss
            - Modal
                - Modal.ts (import 'Modal.scss')
                - Modal.scss
        - webpack.config.js
    - app1
        - src
            - index.ts (import Slider from `components/src/Slider/Slider`)
        - webpack.config.js
    - app2
        - src
            - index.ts (import Slider from `components/src/Slider/Slider`)
        - webpack.config.js
</code></pre></div>
<p dir="auto">I want to use components in app1 and app2. What I tried is building components with <code class="notranslate">DllPlugin</code> and referencing it in app1 and app2 with <code class="notranslate">DllReferencePlugin</code>, it works well for typescript files, but what about scss, images, fonts and other assets? When building app1 or app2, I want their dist folder to include all assets from components. The reason why I'm not importing directly <code class="notranslate">components/src/Modal</code> without dll plugin is that components folder may have different webpack configuration like alias for example. What's the best practice for accomplishing this?</p>