似乎Next.js无法在node_modules中读取所需的css文件。
错误:
./node_modules/@aws-amplify/ui/dist/style.css 13:0
Module parse failed: Unexpected token (13:0)
You may need an appropriate loader to handle this file type.
| * and limitations under the License.
| */
> :root {
|
| /* Colors */
提供潜在解决方案的链接:
https://github.com/aws-amplify/amplify-js/issues/1535
https://github.com/aws-amplify/amplify-js/issues/2230
https://github.com/zeit/next-plugins/issues/267
建议的解决方案是将它放在next.config.js文件的顶部:
if (typeof require !== "undefined") {
require.extensions[".less"] = () => {};
require.extensions[".css"] = (file) => {};
}
我无法让这个提议的修复工作,并且想知道是否有人对实际问题有更深入的了解/使用建议的解决方案设置next.config.js文件。
提前致谢。
使用以下命令在项目目录的根目录下创建next.config.js文件:
const withCSS = require("@zeit/next-css");
if (typeof require !== "undefined") {
require.extensions[".less"] = () => {};
require.extensions[".css"] = file => {};
}
// next.config.js is not transformed by Babel. So you can only use javascript features supported by your version of Node.js.
module.exports = withCSS({
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
// Perform customizations to webpack config
// Important: return the modified config
return config;
},
webpackDevMiddleware: config => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
return config;
}
});
这个答案似乎与用户ngocketit的https://github.com/aws-amplify/amplify-js/issues/1535解决方案相同。