Error: Can't resolve '../../../../node_modules/now-ui-kit/assets/scss/fonts/nucleo-outline.eot'

[stebogit]

Hi,
I am using v1.3.0 and building my styles importing the scss with webpack.

The build fails with the error in the title:

Module build failed (from ./node_modules/css-loader/index.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../node_modules/now-ui-kit/assets/scss/fonts/nucleo-outline.eot'

I believe the issue is in /assets/scss/now-ui-kit_nucleo-outline.scss when importing the fonts; they are in
node_modules/now-ui-kit/assets/fonts
but the code points to
node_modules/now-ui-kit/assets/scss/fonts
with a wrong relative path.

My current workaround is copying the scss and fonts folders and building using those local files (instead from node_modules), after moving the fonts folder inside the scss one.

[dragosct]

Hi, @ewirth! Thank you for using our products. Please open an issue on the right repo https://github.com/creativetimofficial/ct-now-ui-dashboard-pro-react/issues.

Regards,
Dragos

[Rashmi-278]

here's how I resolved it.

It's a loader issue. Add next.config.js file

// next.config.js

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const webpack = require("webpack");
const path = require("path");

module.exports = withFonts(
withCSS(
withImages(
withSass({
webpack(config, options) {
config.module.rules.push({
test: /.(eot|ttf|woff|woff2)$/,
use: {
loader: "url-loader",
},
});
config.resolve.modules.push(path.resolve("./"));
return config;
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
}
})
)
)
);
package info ,

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"next-fonts": "^1.4.0",
"node-sass": "^4.14.1",
"webpack": "^4.44.1",
"next-compose-plugins": "^2.2.0",
"next-images": "^1.3.1",