1

我有一个具有这种结构的应用程序：

/
/src/index.js
/src/styles/index.css
/static/background.png

样式表正在尝试像这样使用 PNG 文件：

// index.css
.page {
  background-image: url("../../../static/background.png");
}

现在我想尽可能避免使用url-loader，只需将 PNG 文件复制到dist文件夹进行生产，但也让它与开发服务器一起使用。

我试过使用这个规则：

      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        use: {
          loader: 'asset/resource',
          options: {
            path: path.join(__dirname, 'static'),
          },
        },
      },

我阅读了有关内置加载程序的信息，asset/resource但是我不明白如何将其设置为从static文件夹中读取 PNG 文件。

我收到错误：

ERROR in ./src/styles/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):

Error: Can't resolve './background.png' in '/Users/user/app/src/styles'

我使用这些规则来处理 CSS：

      {
        test: /\.css$/i,
        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ],
      },
4

0 回答 0