0

尝试加载在 SCSS 中定义的 CSS 背景图像，并通过 WebPack devServer 提供服务。

SCSS 中定义的背景图像被 WebPack 拾取，但它不会显示在页面上。

我已尝试设置publicPath选项MiniCssExtractPlugin.loader并查看了与此问题相关的所有答案，但无法使其正常工作。

更新：还尝试publicPath在file-loader. 根据文档，这默认为输出 publicPath，这在我的情况下是相同的。

更新：当在 SCSS 中使用绝对路径时，它会作为确切路径编译为 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]

索引.scss：

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/',
    },
  },
};

索引.ts：

import './index.scss';

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

1 回答 1

1

我已经解决了这个问题：css-loader在版本上1.0.0。可能是因为它是很久以前安装的。

升级到最新版本的css-loaderwithnpm install css-loader@latest --save-dev解决了这个问题。

于 2020-01-13T10:34:54.770 回答