In my latest project, I have developed Project B using NextJs as an independent module/framework. This project includes components/gui and css/scss files that are bundled into bundle.js with Webpack.
Now, when installing Project B within Project A, the expectation is for Project A's common css styles to take priority over Project B's css styles. If not, default Project B css styles should be used.
Currently, I have successfully created a bundle for Project B. However, I am facing two main issues:
Q1) How can I import Project B's components into Project A? Q2) I am encountering a warning in the build logs - how do I address this?
This is the webpack.development.config.js file that I am using, which is invoked through package.json:
"scripts": {
"dev": "next dev",
"build": "webpack --config webpack.development.config.js --stats detailed",
"start": "next start",
"lint": "next lint"
},
Here is the content of webpack.development.config.js:
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.[contenthash].js',
path: path.resolve('./dist'),
},
mode: 'development',
resolve: {
extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
},
// Module rules...
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
],
}