Настроила webpack, если прописать все стили в одном файле scss и его подключать, то всё ок, но если дробить на несколько отдельных файлов и импортировать их в один и его подключать, то возникают проблемы про сборке и стили не подключаются. Подскажите, что нужно исправить в конфигурационном файле webpack ?
const path = require("path");
const HTMLWepackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
port: 3000,
hot: true,
open: true,
overlay: true,
contentBase: "./dist",
},
plugins: [
new HTMLWepackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: [/node_modules/],
},
{
test: /\.html/,
loader: "html-loader",
options: {
esModule: false,
},
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
esModule: false,
},
},
],
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
{
loader: "sass-loader",
},
],
},
],
},
};
ошибка:
ERROR in ./src/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
14 │ background: $bgColor;
│ ^^^^^^^^
╵
src\header.scss 14:17 @import
src\index.scss 1:9 root stylesheet
at processResult (D:\TEST\DataArt\Control work\node_modules\webpack\lib\NormalModule.js:598:19)
at D:\TEST\DataArt\Control work\node_modules\webpack\lib\NormalModule.js:692:5
at D:\TEST\DataArt\Control work\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at D:\TEST\DataArt\Control work\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (D:\TEST\DataArt\Control work\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at D:\TEST\DataArt\Control work\node_modules\sass-loader\dist\index.js:54:7
at Function.call$2 (D:\TEST\DataArt\Control work\node_modules\sass\sass.dart.js:91729:16)
at _render_closure1.call$2 (D:\TEST\DataArt\Control work\node_modules\sass\sass.dart.js:80373:12)
at _RootZone.runBinary$3$3 (D:\TEST\DataArt\Control work\node_modules\sass\sass.dart.js:27269:18)
at _FutureListener.handleError$1 (D:\TEST\DataArt\Control work\node_modules\sass\sass.dart.js:25797:19)
@ ./src/index.js 1:0-22
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
Простой
Средний
Средний
Средний
