main.s css сохранение только файла в веб-пакете и никаких других файлов .s css

Question

Каждый раз, когда я сохраняю любой файл .s css, кроме main.s css, они работают, но в конечном итоге выдают ошибку, и когда я , то запускаю main.s css, они работают хорошо, вот ошибка:

ОШИБКА в ./src/assets/stylesheets/main.scss (./node_modules/css-loader/dist/cjs. js! ./ node_modules / sass-loader / dist / cjs. js! ./ src / assets / stylesheets / main.s css) Сбой сборки модуля (с ./ node_modules / sass-loader / dist / cjs. js): SassError: Файл для импорта не найден или не читается: компоненты / загрузка. в строке 1 src / assets / stylesheets / components / _components-dir.scss из строки 15 E: \ Designs by Harp \ Freelance-webdesign-development \ Client-projects \ Projects-2020 \ Sk-inspire \ skInspire \ src \ assets \ stylesheets \ main.s css

@ import 'components / button', ^

@ ./src/assets/stylesheets/main .s css 1: 14-129 @ ./src/assets/scripts/index.js

Вот _components-dir.s css:

@import 'components/button',
'components/arrow',
'components/coming-soon',
'components/landing',
'components/loading';

Вот _loading.s css:

.loading {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo {
    width: 80%;
  }
}
@media screen and (min-width: 8em) and (orientation: landscape) {
  .logo {
    width: 60% !important;
  }
}
@media screen and (min-width: 767px) {
  .logo {
    width: 40% !important;
  }
}
@media screen and (min-width: 1200px) {
  .logo {
    width: 20% !important;
  }
}

Вот main.s css:

@charset 'UTF-8';

// 1. Configuration and helpers
@import 'abstracts/abstracts-dir';

// 2. Base stuff
@import 'base/base-dir';

// 3. Components
@import 'components/components-dir';

// 4. Layout 
@import 'layout/layout-dir';

// 5.  Pages
@import 'pages/pages-dir';

// 6.  Vendors
@import 'vendors/vendors-dir';

Вот webpack.dev. js:

  const path = require("path"),
  common = require("./webpack.common"),
  merge = require("webpack-merge"),
  HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
});

Вот webpack.common. js:

    const path = require("path");

module.exports = {
  entry: {
    main: "./src/assets/scripts/index.js",
    vendor: "./src/assets/scripts/vendor.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(svg|png|jpeg|jpg|gif|json)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "images"
          }
        }
      }
    ]
  }
};