Create a React component lib - reactjs

Question

I'm trying to create a library with reusable react components. I'm using React, Typescript, Sass and Webpack.
My problem is : when I'm using my components from the result of the webpack build, there is no css with them although I have an index.css file with everything I need.
It seems like the css is not used by the output.
Here is my webpack.config.json :
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
mode: 'production',
entry: path.resolve(__dirname, '../src/index.ts'),
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'index.js',
library: 'whatever',
libraryTarget: 'umd',
umdNamedDefine: true
},
devtool: 'source-map',
externals: {
react: 'react',
'react-dom': 'react-dom',
},
module: {
rules: [
{
test: /\.tsx?/,
loader: 'ts-loader',
options: {
configFile: path.resolve(__dirname, '../tsconfig.build.json')
},
exclude: /node_modules/
},
{
test: /\.s(a|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
camelCase: true,
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
]
},
resolve: {
modules: ["node_modules", "src"],
extensions: ['.tsx', '.ts', '.scss', '.js']
},
plugins: [
new MiniCssExtractPlugin({
filename: 'index.css',
chunkFilename: '[id].[hash].css',
}),
]
};
Here is my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"lib": [ "es2015", "dom" ],
"outDir": "./dist",
"sourceMap": true,
"moduleResolution": "node",
"declaration": true,
"strict": true,
"jsx": "react"
},
"include": [
"src"
],
"exclude": [
"node_modules",
"src/**/*.stories.tsx",
"src/**/*.test.tsx"
]
}
EDIT 1:
As suggested by Muhammad Mehar I changed the loader: [MiniCssExtractPlugin.loader, ... to use: [... but it didn't work
Here is how I'm trying to use my lib :
somewhereInTargetApp.ts
import { MyComponent } from 'MyLib';
export const OtherComponent = (props) => {
return (
<MyComponent someProp={'Hello world'}/>
)
};
And in my lib I have some index.ts file which exports the component.
Everything works fine for the component except that there is no css with it

Answer 1

Rule.loader is a shortcut to Rule.use: [ { loader } ].
Passing a string (i.e. loader: 'style-loader' ) is a shortcut to the loader property (i.e. use: [ { loader: 'style-loader '} ])
Rule.use can be an array of UseEntry which are applied to modules. Each entry specifies a loader to be used.
Passing a string (i.e. use: [ 'style-loader' ]) is a shortcut to the loader property (i.e. use: [ { loader: 'style-loader '} ])
Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured)
Try this:
module: {
rules: [
{
test: /\.tsx?/,
loader: 'ts-loader',
options: {
configFile: path.resolve(__dirname, '../tsconfig.build.json')
},
exclude: /node_modules/
},
{
test: /\.s(a|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
camelCase: true,
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
]},
I hope it help you.

Answer 2

In the end I switched to CSS in JS with aphrodite
This is not what I wanted to do but it will do the work for now
If someone has an answer to my problem I would be happy to test it