接下来.js assetPrefix 会破坏更少的加载器

Question

我是Next.js的新手。任何帮助将不胜感激。

该应用程序在本地开发环境中运行良好。但是，一旦我将以下内容添加到next.config.js，接下来.js就会出现错误。

// next.config.js
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
// Use the CDN in production and localhost for development.
assetPrefix: isProd ? 'https://cdn.mydomain.com' : '/example',
}

#### error message
error - ./styles/fonts.less 1:0
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
> @font-face {

不确定问题是什么。欢迎任何帮助。以下是我对应用程序的所有配置。

const withImages = require('next-images')
module.exports = withImages();
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
const withLess = require('@zeit/next-less')
/* With CSS Modules */
module.exports = withLess({
cssModules: true,
cssLoaderOptions: {
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]',
localsConvention: 'camelCase',
camelCase: 'dashes',
}
})

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
// Use the CDN in production and localhost for development.
assetPrefix: isProd ? 'https://cdn.mydomain.com' : '/example',
}

Answer 1

我找到了问题的根本原因。多个module.exports导致了问题，因为最后一个将覆盖所有以前的问题。这意味着将没有加载器来处理 Less/CSS。我还决定使用next-compose-plugins插件来帮助我处理多个插件。否则，我必须做类似withCSS(withLESS()).

const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const withLess = require('@zeit/next-less');
const isProd = process.env.NODE_ENV === 'production';
module.exports = withPlugins(
[
[withLess, {
cssModules: true,
cssLoaderOptions: {
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]',
localsConvention: 'camelCase',
camelCase: 'dashes',
}
}],
[withCSS],
[withImages],
],
{
/* global config here ... */
assetPrefix: isProd ? 'https://cdn.cloudfront.net/vpassets' : ''
},
);