Trouble loading antd's less styles

In my NextJs project, I have the following file structure:

-pages
    -_app.tsx
-app
    -styles
        -antdstyles.less

Within _app.tsx, I am attempting to import @styles/andstyles.less, which simply imports antd styles like this: @import '~antd/dist/antd.less'; However, I encounter an error that says:

/app/styles/antdstyles.less

@import '~antd/dist/antd.less'; ^ '~antd/dist/antd.less' wasn't found. Tried - /home/computer/job/proj/app/styles/~antd/dist/antd.less,/home/computer/job/proj/css/~antd/dist/antd.less,/home/computer/job/proj/~antd/dist/antd.less,~antd/dist/antd.less

cssreactjsnext.jslessantd

Answer №1

To effectively incorporate Less in your Next.js project, it is essential to utilize a loader and configure it within the next.config.js file. The default setup of Next.js does not natively support the use of Less in applications.

Answer №2

If you're looking to improve your experience with Antd, consider upgrading to version 5.* as it has been working well for me.

Update: Antd has transitioned from using less files to css-in-js in V5. More information can be found in the upgrade guide on their website. To make this change, you'll need to eliminate all less files and follow the steps outlined in the less file migration guide also provided on their site.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

splitting up the lengthy list into manageable chunks according to the screen dimensions

How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...

htmlcss

The sequence of componentDidMount within the hierarchy of React components

I am working on a React application with the following structure: The component A consists of components B and C When component B triggers its componentDidMount method, is it accurate to say that all components have finished mounting? In other words, do ...

reactjsreact-fiber

Tips for extracting an SVG path from HTML structure

This example I'm referencing is by Chris Coyer <svg version="1.1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;"> <defs> <g id="icon-image"> <path class="path1" d="M0 4v26h32v ...

htmlcsssvg

Error encountered when compiling SCSS with the '@use' statement

Currently, I am utilizing Gulp for the purpose of compiling scss into css. However, whenever I include a @use statement in my code, it does not compile the css correctly into the css file; instead, it simply duplicates the @use statement. What could be cau ...

csssass

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

Looking for a way to make a video modal automatically open on page load and allow users to reopen it by clicking a button? Here's a snippet of code that might help you achieve that: HTML <html> <head> <link rel="stylesheet ...

javascripthtmlcssbootstrap-4bootstrap-modal

What is the best way to eliminate the border on Material UI's DatePicker component?

Check out this code snippet for implementing a datepicker component: import React, { Fragment, useState } from "react"; import { KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers"; import DateFnsUtils from &qu ...

javascriptreactjsdatepickermaterial-ui

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

jqueryhtmlcss

The middleware function in my express server is not being identified

Currently, I am tackling server-side rendering in React and have developed a basic server in Express. However, I'm encountering the "TypeError('app.use() requires a middleware function')" error repeatedly. Below is a snippet of my app.js: v ...

javascriptnode.jsreactjsexpress

What is the process for importing a map from an external JSON file?

I have a JSON file with the following configuration data: { "config1": { //this is like a map "a": [ "string1", "string2"], "b": [ "string1", "string2"] } } Previously, before transitioning to TypeScript, the code below worked: import ...

jsonreactjstypescript

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL

My aim is to determine whether or not I should use an image based on its dimensions. To achieve this, I came across a function on stack overflow that can retrieve the dimensions of an image just by using its URL. Here is the code snippet they provided: f ...

javascriptcssreactjsimagematerial-ui

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

I am currently working on creating a react material ui AppBar. The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side. However, I have been facing difficulty in making the logo al ...

cssreactjsmaterial-uicss-grid

React Final Form clears form fields and validation, while keeping submitSucceeded status intact

Utilizing React Final Form to showcase a form and manage form submission, I am facing an issue where I want all the form fields to clear upon successful submission while displaying a submit success message tied to the submitSucceeded FormState property. H ...

reactjsreact-final-formfinal-form

Maintain the text layout when copying and pasting from the Angular Application

After noticing that copying and pasting text from an Angular Application to a text editor like Microsoft Word results in losing the original format, I decided to investigate further. An example I used was the angular material website: https://material.ang ...

cssangular

Preventing NextJS Link Component from Displaying 404 Error

Hey there, can anyone help me figure out why my Link Component is having trouble finding the linked page? It's weird because VSCode is auto-completing the file name as I type it in, but all I get is a 404 error. //index.js in WelcomePage folder import ...

reactjsnext.js

What causes the size of an image to decrease when placed within an anchor tag?

Trying to add clickable social media icons, but when wrapped in an anchor tag the images shrink significantly. <span class="iconspan"> <a href="https://www.instagram.com/lil_ijoez/" target="_blank" ...

htmlcss

Troubleshooting: ReactJS ReactCSSTransitionGroup animation not being applied

Recently, I created a new ReactJS application using the React starter kit. My goal is to implement view transitions with ReactCSSTransitionGroup, but for some reason, the animation classes are not being added. Can anyone spot what I might be overlooking? ...

animationreactjs

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

I utilized Bootstrap in my project, implementing the following code: <div class="input-group"> <input type="text" class="form-control input-lg" autofocus> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Greetings, I am a newcomer to Prisma and am transitioning from Mongoose. I am seeking guidance on how to create a VerificationToken model where the expires at field automatically updates to the current time plus 10

Is there a way to conceal the password field in Prisma similar to using select false in Mongoose? Also, how can I set up a VerificationField model that automatically generates an expires at field with a value 10 minutes from the current date? I'm loo ...

databasemongoosenext.jsprisma

Obtaining material for optimizing a dynamic image

I'm facing a challenge with my responsive image setup. The image is filling the top half of the screen as intended, but I can't seem to get the content underneath it to stay below the image as it resizes. Instead, the content ends up overlapping ...

htmlcssresponsive-design

Setting up the propTypes for interface in React TypeScript

How can I specify the correct PropTypes for a property that is an interface in TypeScript with PropTypes? Requirements - Implementing both TS and PropTypes. Goal - To have a more precise type definition than PropTypes.any that meets standard eslint an ...

javascriptreactjstypescriptreact-proptypes