css - 如何在 Next JS 中设置 CSS/SCSS 背景图像属性？

Question

我正在使用 React 和 Next JS 开发一个项目，这是文件结构的一瞥：

// other root folders...
L pages
L public
L src
    L assets
        L image.svg // this is the image that I wanted to turn into a background of an element
    L components
L styles
  L divider.module.scss // this is where I've added the background-image property

我已经使用import image from '[file path]'官方文档中的自定义 Web 包配置使用具有各种扩展名的语法成功导入了图像。next.config.js 包含以下内容：

module.exports = {
webpack: (config) => {
  config.module.rules.push({
    test: /\.(png|jpe?g|gif|svg)$/i,
    loader: 'file-loader',
    options: {
      name: '[name]_[hash].[ext]',
      publicPath: `/_next/static/assets`,
      outputPath: 'static/assets',
    },
   });
    return config;
  },
};

然而，问题是使用 CSS/SCSS 加载的图像似乎会引发这个特定的错误：XML Parsing Error: syntax error export default "[file path]";. 谁能详细说明我做错了什么？谢谢你。

标签： cssreactjssassnext.js