WebPack: фоновое изображение не загружается - PullRequest
Новая
       27

WebPack: фоновое изображение не загружается

0 голосов
/ 10 января 2020

Попытка загрузить CSS фоновое изображение, определенное в S CSS, и передать через WebPack devServer.

Фоновое изображение, определенное в S CSS, выбирается WebPack, но это не не отображается на странице.

Я попытался установить параметр publicPath в MiniCssExtractPlugin.loader и просмотрел все ответы, которые я смог найти, связанные с этой проблемой, но не смог заставить это работать .

Обновление : также попытался установить параметр publicPath в file-loader. Согласно документации это значение по умолчанию выводится как publicPath, который в моем случае одинаков.

Update : при использовании абсолютного пути в S CSS он компилируется в CSS как этот точный путь, но он не будет работать как локальный dev, staging и prod имеют разные пути.

Соответствующая часть вывода при запуске webpack-dev-server: 

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/dist/cjs.js??ref--5-2!index.scss:
                     Asset      Size  Chunks             Chunk Names
    pages/index/404@2x.png  29.2 KiB          [emitted]

index.s css: 

body {
  background: url("./pages/index/404@2x.png");
}

CSS вывод: 

body {
    background: url([object Module]);
}

Моя конфигурация WebPack: 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const outputDir = 'dist/website';
const publicPath = '/web/website/';

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './index.ts',
  output: {
    path: path.resolve(__dirname, outputDir),
    publicPath: publicPath,
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              sourcemap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      path: path.resolve(__dirname, outputDir),
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new CleanWebpackPlugin([outputDir]),
  ],
  devServer: {
    contentBase: path.join(__dirname, outputDir),
    publicPath: publicPath,
    port: 9009,
    proxy: {
      '/': 'http://127.0.0.1:5000/',
    },
  },
};

index.ts: 

import './index.scss';

console.log('WebPack is working!');

1 Ответ

1 голос
/ 13 января 2020

Я выяснил проблему: css-loader был на версии 1.0.0. Вероятно, потому что он был установлен долгое время. go.

Обновление до последней версии css-loader с npm install css-loader@latest --save-dev решило проблему.

...