In production, try:

Question

0

226

Views

Compiling A Typescript Create React App to Import in another React App

I have a Create React App written in Typescript, I will call it MyApp. I want to run this App inside an already existing React App, I will call it ExistingApp.

I would like to use it as follows:

import App from "node_modules/@MyApp/src"

function ExistingApp() {
   return (
     <div className="App">
       <App />
     </div>
   );
}

export default ExistingApp;

I would like to do this compilation/Transpiling using Webpack. I would like the folder structure to be maintained without bundling everything into a single JS file. I have managed to achieve the desire outcome with

tsc --module commonjs --outDir dist

However my .scss files are not being copied to the dist folder. the dist folder only contains the transpilled js files.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T05:51:25.868Z

The below solution is to get webpack to use Sass, with bundling. If you do not want bundling, I wouldn't use webpack at all.

In production, try:

Install these packages with the following command

npm i --save-dev sass-loader node-sass mini-css-extract-plugin css-loader style-loader

Add the following code snippet to your webpack config in the rules array (make sure to import MiniCssExtractPlugin in the config file)

{
     test: /\.(s(a|c)ss)$/,
     use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader']
}

Import MiniCssExtractPlugin (put this at the top of the config):

import * as MiniCssExtractPlugin from "mini-css-extract-plugin"

OR

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

In development, you can just do this

Same thing as step one in example 1
Use this code snippet instead, in the same place as example 1 (no need to import MiniCssExtractPlugin)

{
    test: /\.(s(a|c)ss)$/,
    use: ['style-loader','css-loader', 'sass-loader']
}

Source

0

226

Compiling A Typescript Create React App to Import in another React App

1 answers

0

In production, try:

Import MiniCssExtractPlugin (put this at the top of the config):

In development, you can just do this

Find remote jobs

Andres GPT