Webpack recolectó archivos (.css, .js) en una biblioteca y utilícelos en otro proyecto de React. Los estilos especificados en el componente no pasan, aunque el archivo .css está presente y los estilos están ahí.
Archivo UiButton.jsx
import styles from './UiButton.module.css'; const UiButton = () => { return ( <> <button className={styles.button}>Text</button> </> ); } export default UiButton;archivo index.js
import UiButton from './UiButton/UiButton'; import './index.css'; export { UiButton };Archivo webpack.config.js
const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js', libraryTarget: "umd", library: "uilibrarytest" }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader' ] } ] }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: 'index.css', }), // new HtmlWebpackPlugin({ // template: './public/index.html', // }), new webpack.ProvidePlugin({ "React": "react", }), ], resolve: { extensions: ['.js', '.jsx'], }, }Esto es lo que crea el paquete web:
.button { background: red; } html { margin: 0; padding: 0; }¿Cómo hacer que al usar un componente de una biblioteca determinada, los estilos también se extraigan?
Los cargadores en Webpack se evalúan de derecha a izquierda. En su configuración, el orden de evaluación es 'css-loader', MiniCssExtractPlugin.loader y finalmente 'style-loader'. Pero 'style-loader' solo inyecta estilos en el DOM. Necesita que MiniCssExtractPlugin.loader sea el primer elemento en la matriz de "uso". Vea abajo...
{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] }Además, puede decirle a webpack que use MiniCssExtractPlugin.loader durante la producción y, en otros momentos, use 'style-loader'.
const isProduction = process.env.NODE_ENV == 'production'; const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; ...other config { test: /\.css$/, use: [ stylesHandler, 'css-loader' ] }Y en sus secuencias de comandos package.json,
"build": "webpack --mode=production --node-env=production"