Не удается получить веб-пакет для вывода css в комплекте?

Question

Я новичок в вебпаке и после курса.Но одна вещь, о которой они на самом деле не говорят, это как скомпилировать различные sass в css.

Я попробовал здесь, но получаю ошибку.Я пытаюсь получить его для вывода в styles.css для использования с WordPress

const path = require('path'),
settings = require('./settings');

module.exports = {

  entry: {
    home: [
            settings.themeLocation + "js/scripts.js"
        ],
        style: [
            settings.themeLocation +'styles/main.sass'
        ]
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    home: [
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
    ]
    style:[
    path: path.resolve(__dirname, settings.themeLocation + "styles"),
    filename: "styles-bundled.css"
    ]
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { test: /\.css$/, use: 'css-loader' }
      { test: /\.sass$/, use: 'sass-loader' }
    ]
  },
  mode: 'development'
}

Answer 1

Вот фрагмент из моей конфигурации webpack

Вам необходимо установить style-loader, css-loader и sass-loader
Следующий фрагмент предназначен для части разработки

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

Для производства

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 2,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 3,
                        },
                    },
                    'sass-loader',
                ],
            },

и добавьте фоллинг в раздел плагинов

new MiniCssExtractPlugin({
    filename: '[name].[chunkhash:8].css',
}),

Обратите внимание, что приведенные выше фрагменты могут не работать напрямую для вас, это просто для того, чтобы дать вам идеюкак webpack может обрабатывать css $ scss