Webpack4您可能需要适当的加载程序来处理此文件类型Sass文件

Question

我正在尝试使用webpack导入main.scss文件来配置index.js文件。

我更新了webpack.config.js，并根据我的在线研究和一些文档添加了新的领导者，但是我无法编译该文件。

我无法确定此文件有什么问题。

File Structure

Package.json`

错误：Error Image

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const cleanwebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js'
  },

      optimization:{  
        splitChuncks: {
          cacheGroup: {
            styles: {
              name: 'styles',
              test: /\.css$/,
              chunks: 'all',
              enforce: true
            }
          }
        }
      },
devServer: {
    hot: true,
    compress: true,
    contentBase: path.join(__dirname, 'dist'),
    open: 'Firefox'
  },

watch: true,
devtool: 'source-map',
output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist')
},

plugins: [
  new cleanwebpackPlugin(['dist']),
  new MiniCssExtractPlugin({
    filename: "style.css",
    chunkFilename: "[name].css"
  }),
  new webpack.HotModuleReplacementPlugin(),
  new HtmlwebpackPlugin()
],

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

       },
       {
         loader: 'sass-loader',
         options: {
           sourceMap: true,
         },
       }

     ]
   }
  ]
}


};// } Module Export end

实际可行的解决方案。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports = {

  entry: {
    app: './src/index.js'
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }

    }

  },

  devServer: {
    hot: true,
    compress: true,
    contentBase: path.join(__dirname, 'dist'),
    open: 'Firefox'
  },
  watch: true,
  devtool: 'source-map',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: "[name].css"

    }),

    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin()

  ],

  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader"

        },
        "sass-loader"
      ]
    }]

  }
};