当 sass 文件中有 url 时，Webpack 模块构建失败

Question

I'm having trouble with the module build for my style.scss file. It seems that the image URLs that I've referenced are causing the build to fail and I'm not sure why. I thought it may be due to lacking an appropriate loader, so I installed the resolve-url-loader, which hasn't made any difference. I've looked at many other instances where people have experienced something similar and none of their solutions have worked for me.

The Error:

ERROR in ./src/sass/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../public/fonts/montserrat-v15-latin-600.eot' in 'C:\Users\Kaleshe\Local Sites\soundtruism\app\public\wp-content\themes\soundtruism\src\sass'
    at C:\Users\Kaleshe\Local S

File Structure:

webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: {
    frontend: ['./src/index.js', './src/sass/style.scss'],
    customizer: './src/customizer.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name]-bundle.js'
  },
  mode: 'development',
  devtool: 'cheap-eval-source-map',
  module: {
    rules: [
      {
        enforce: 'pre',
        exclude: /node_modules/,
        test: /\.jsx$/,
        loader: 'eslint-loader'
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(sass|scss)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-sass-loader', 'resolve-url-loader', 'sass-loader']
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: 'svg-defs.svg'
        }
      },
      {
        test: /\.(jpe?g|png|gif)\$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images/',
              name: '[name].[ext]'
            }
          },
          'img-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new BrowserSyncPlugin({
      open: 'external',
      host: 'soundtruism.local',
      files: '**/*.php',
      proxy: 'soundtruism.local',
    })
  ],
  optimization: {
    minimizer: [new UglifyJsPlugin(), new OptimizeCssAssetsPlugin()]
  }
};

Answer 1

PATH FROM THE ERROR You are referencing the fonts folder located in public directory. Where as the, the sass file is in src/sass . You need to use ../../public to access the public directory.

The first ../ will take you to src and the next ../ will take you to / .