У меня проблемы с получением темы и bootstrap обычно импортируется (по классам), а мои вещи импортируются с использованием модулей s css.
Я взял create-реагировать-приложение и извлек, но у меня есть много маленьких стилей.s css файлов, и я не хочу потом переименовывать все в styles.module.s css. Я предполагал, что смогу сделать это с помощью включений, но я могу заставить их работать, но не вместе. Если я закомментирую первый загрузчик и включаемый модуль, CSS модули работают, и наоборот.
Вот мои модули:
{
test: /\.(scss|custom\.scss)$/,
include: [/node_modules\/.*/, path.resolve(__dirname, "src", "styles")],
use: [
"style-loader",
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 3,
sourceMap: isEnvProduction,
},
},
postCSSLoader,
{
loader: require.resolve("sass-loader"),
options: { sourceMap: true },
},
],
sideEffects: true,
},
{
test: /\.(scss|custom\.scss)$/,
include: [path.resolve(__dirname, "src")],
use: [
"style-loader",
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 3,
sourceMap: isEnvProduction,
modules: true,
},
},
postCSSLoader,
{
loader: require.resolve("resolve-url-loader"),
options: { sourceMap: !isEnvProduction, },
},
{
loader: "sass-loader",
options: {
sassOptions: {
indentWidth: 4,
includePaths: [path.join(process.cwd(), "src", "styles")],
modules: { getLocalIdent: getCSSModuleLocalIdent },
},
},
},
],
sideEffects: true,
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
postCSSLoader,
],
sideEffects: true,
},
Все остальное довольно стандартно. У меня есть тема, которая имеет пользовательский CSS и импортирует bootstrap. Вот вершина моего глобального. css
@import "_variables";
@import "~bootstrap/scss/bootstrap.scss";
@import "../_metronic/_assets/sass/global/integration/frameworks/bootstrap/bootstrap.scss";
Я пробовал много комбинаций, используя включения и исключения, но я не могу заставить его работать. Что-то мне не хватает или что-то еще в веб-пакете мне нужно сделать?
Спасибо за помощь