Question

我尝试将使用create-react-app创建的应用迁移到nextJs，并且总是收到此错误：

[错误] ./src/sass/common.scss ModuleParseError：模块解析失败：意外的字符''（1：4）您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders

这是我的文件next.config.js：

const withPlugins = require("next-compose-plugins");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true"
});
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withImages = require("next-images");

module.exports = withPlugins(
 [withBundleAnalyzer, withImages, withSass, withCSS],
 {
   webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    config.module.rules.push({
     test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,
     use: [
      defaultLoaders.babel,
      {
        loader: "url-loader",
        options: {
          limit: 100000,
          name: "[name].[ext]"
        }
      }
    ]
  });
  return config;
}

}）;

和我的package.json：

"devDependencies": {
"css-loader": "^3.4.2",
"cypress": "^3.1.0",
"file-loader": "^5.0.2",
"node-sass": "^4.13.1",
"redux-devtools": "^3.5.0",
"sass-loader": "^8.0.2",
"url-loader": "^3.0.0"
}

我不明白...我有一个用于文件scss的加载器，如果有人可以向我解释，谢谢！

Answer 1

您没有为SCSS文件类型添加加载程序。您可以这样做：

    config.module.rules.push({
  test: /\.(scss)$/,
  loaders: [
    {
      loader: 'css-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    },
  ],
});

在这里我使用两个装载机。 sass-loader 将您的SCSS转换为CSS，然后通过 css-loader 运行以处理@import（），url（）等。

别忘了使用npm install安装这两个装载程序。

NextJs的ModuleParseError

1 个答案: