Scss / Sass webpack / проект не работает

Question

Новое в настройке веб-пакета. Попытка настроить очень простой html / css / js сайт, без реакции или другой js framework. Я пытаюсь добавить scss прямо сейчас и продолжаю получать эту ошибку.

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'style-loader' in '/Users/brian/Documents/Hiromi/6_WebFiles'
 @ ./src/main.js 1:0-32
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js

Вот мой конфиг веб-пакета:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.scss$/,
        use: 
        [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "sass-loader",
          options: {
            includePaths: ["./src/*"]
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

Все, чего я хочу, это чтобы веб-пакет скомпилировал файл ./src/main.scss в файл ./dist/main.css.

Пробовал кучу вещей, но не уверен, как это сделать. Любые намеки будут потрясающими!

Спасибо!

Answer 1

Для каждого загрузчика, который вы хотите использовать в веб-пакете, вам нужно будет загрузить его через npm или yarn, чтобы веб-пакет мог найти его в каталоге node_modules.

Так что вам нужно будет установить style-loader, но также sass-loader, css-loader, html-loader и babel-loader через npm.

babel-loader, в свою очередь, также нуждается в babel-core для запуска, поэтому вам необходимо установить его тоже

Вы можете сделать это, выполнив:

npm install --save style-loader sass-loader css-loader html-loader babel-loader babel-core

Если у вас уже установлен какой-либо из этих модулей, npm проигнорирует его, поэтому вся строка должна быть безопасной для запуска