在下一个 js 中导入图像、css 和 sass 文件答案

【问题标题】：import image , css and sass file in next js在下一个 js 中导入图像、css 和 sass 文件
【发布时间】：2023-03-08 10:09:02
【问题描述】：

我正在使用 react 和 next js。我将 @zeit/next-css 和 @zeit/next-sass 添加到 next.config 文件中。

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass());

现在我也想加载文件。我尝试了这个但不工作并出错：

module.exports = withCSS(withSass({
    webpack (config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });

        return config;
    }
}));
_app.js:7 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

我也安装了 next-images。但我不知道如何使用 css 和 sass 配置它？

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withCSS(withSass(withImages ()));//error and not working

【问题讨论】：

我也有同样的问题。 nextjs 文档并不清楚如何使用不同配置的多个插件。

标签： reactjs webpack next.js webpack-file-loader

【解决方案1】：

你可以这样试试。 next-compose-plugins 可以解决问题。

  const withPlugins = require('next-compose-plugins');
  const withCSS = require("@zeit/next-css");
  const withSass = require('@zeit/next-sass');
  const withImages = require('next-images');

  module.exports = withPlugins([
    [
      withCSS(withSass({}))
    ],
    [
      withImages({})
    ],
  ])

【讨论】：