如何实现Next.js SVG加载程序

时间:2020-06-09 05:45:34

标签: javascript next.js vercel

由于Zeit有一个新品牌,因此没有以下更新:

  • @ zeit / with-css
  • @ zeit / with-sass

我的代码正在运行,现在由于该问题我什至无法运行我的网站。如何加载SVG不同?我尝试使用.babelrc,但没有用。

代码 next.config.js

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

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;
    },
  })
);

1 个答案:

答案 0 :(得分:1)

从Next.js 9.3开始,您可以使用内置的CSS和SASS支持。

有关更多信息,请参见Built-in SASS support

对于svg-您不需要装载程序。

假设您有public/foo.svg张图片,可以在CSS中将其指定为url(/foo.svg)