NextJs Webpack — импортируйте другой проект NextJs B в качестве модуля/фреймворка внутри проекта NextJs A. ⇐ CSS

[Anonymous]

Я создал проект NextJs B как независимый модуль/фреймворк, который будет содержать файлы компоненты/gui и css/scss, связанные как Bundle.js с использованием Webpack.
Установка вышеуказанного внутри Ожидается, что в проекте NextJs A общие стили CSS проекта A будут переопределять стили CSS проекта B, если не использовать стили CSS проекта B по умолчанию.
На данный момент я добился создания пакета с проектом Б. Однако у меня возникли две проблемы.
В1) Как импортировать компоненты проекта Б в проект А?
В2) Я получаю это предупреждение в журналах сборки. ?
Это мой webpack.development.config.js, и я вызываю его через package.json, используя:

Код: Выделить всё

"scripts": {
"dev": "next dev",
"build": "webpack --config webpack.development.config.js --stats detailed",
"start": "next start",
"lint": "next lint"
},

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: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + "/";
},
},
options: {
esModule: true,
modules: {
namedExport: true,
localIdentName: "[name]__[contenthash]__[local]",
},
importLoaders: 1,
},
},
],
include: /\.module\.css$/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader',
],
exclude: /\.module\.css$/,
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + "/";
},
},
options: {
esModule: true,
modules: {
namedExport: true,
localIdentName: "[name]__[contenthash]__[local]",
},
importLoaders: 1,
},
},
'sass-loader'
],
include: /\.module\.scss$/,
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
],
exclude: /\.module\.scss$/,
},
{
test: /\.ts$/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/env' ],
}
}
},
{
test: /\.tsx$/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/env', '@babel/typescript', '@babel/preset-react' ],
}
}
},
],

},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
],
}

Подробнее здесь: https://stackoverflow.com/questions/790 ... -inside-ne