如何解决使用 next.js 导入 css 文件时出错？

Question

错误：

./node_modules/quill-emoji/dist/quill-emoji.css
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

在_app.js中，我有：

import "quill-emoji/dist/quill-emoji.css";

在next.config.js中：

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


if (typeof require !== 'undefined') {
    require.extensions['.less'] = () => {};
    require.extensions['.css'] = file => {};
}

module.exports = withPlugins([
    withImages,
    withCSS
], {
    devIndicators: {
        autoPrerender: false,
    },
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
...
})

Answer 1

我认为表情符号图标是 svg。你可能需要一个 svg loader 来解决这个问题。

next-images 添加了对 jpg、jpeg、svg、png、ico、webp 和 gif 图像的支持。

注意：我还没有用 quill 测试过这个

这是一个示例片段。

const withImages = require("next-images");

module.exports = withImages({
    webpack(config, options) {
        return config;
    }
});

Answer 2

emoji css 似乎包含 data:image 的内容并加载 svg 的内联。

我尝试使用多个加载程序，但找不到正确的顺序，您可能需要 resolve-url-loader 某些特定的顺序。

可能最好只使用 next/head link 并结束它。

如何解决使用 next.js 导入 css 文件时出错？

How do I solve Error importing a css file with next.js?

javascript

reactjs

babeljs

next.js