I am encountering a continuous css ParserError while trying to compile my react project

I'm having trouble with the compilation of my React project. While everything runs smoothly with npm start, I encounter an error during compilation:

npm run build                               

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8f8d9a8798879a97c3888b8b8aaedec0dfc0de">[email protected]</a> build
> react-app-rewired --openssl-legacy-provider build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
Failed to compile.

./src/HubView.scss
ParserError: Syntax Error at line: 1, column 22

Can anyone suggest a solution for successfully compiling my project? Here's a snippet from my SCSS file:

.HubView {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  --margin: 16px;
  margin: var(--margin);
}

.HubView__title {
  grid-column: 1 / span 2;
  font-weight: bold;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -1.28px;
}

(HubView__entity-card {
....more code snippets...
}
cssnpmsass

Answer №1

The last block is missing the parent selector &.

.HubView__find-tertiary-button {
    grid-column: 1 / span 2;
    text-align: center;
    &-button {
        background: none;
        white-space: nowrap;
        padding: 6px 24px;
        border: 1px solid #535353;
        box-sizing: border-box;
        border-radius: 100px;
        font-style: normal;
        font-weight: bold;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #ffffff;
    }
}

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

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

javascripthtmlcssp5.js

What is the best value to assign to the "start" script in my NPM package.json file?

I'm having trouble executing the command npm start because my package.json file doesn't have a "start" script. I've attempted to set values like "start": "node app.js" and "start": "node server.js", but they haven't resolved the issue. ...

node.jsjsonnpmpackagenode-modules

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

javascripthtmljquerycss

What is the best way to align a bootstrap 5 iframe in the center?

<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500& ...

cssbootstrap-5

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

javascriptjqueryhtmlangularjscss

Error: The function named 'setValues' has already been declared

Looking for some guidance with an error message that involves the 'setValues' declaration in my code. I've come across similar questions and answers, but I'm still unsure about what changes I need to make. Your input would be highly app ...

javascriptreactjsnpmvisual-studio-code

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Note ...

csshtml

Tips for changing the background color of a dropdown menu when hovering in Zurb Foundation 5

Is there a way to customize the background color when hovering over <a href="#">Find Me</a>? I want the background color to change while hovering, similar to how it appears in the image before hovering. And this is how it looks after hovering: ...

csshtmlzurb-foundation-5

Adapting Vue.js directive based on viewport size - a guide

Having an element with the v-rellax directive, I'm utilizing it for prallax scrolling in this particular div: <div id="image" v-rellax="{ speed: -5 }"></div> Currently, there's a need to adjust the speed property ...

javascripthtmlcsslaravelvue.js

Setting up the most recent Node.js iteration on AWS with NPM is a breeze

Attempting to upgrade Node.js to the latest stable version by executing the commands sudo npm cache clean -f sudo npm install -g n sudo n stable Encountering an SSL error when running the second command npm http GET https://registry.npmjs.org/n npm ERR ...

node.jsamazon-web-servicesnpm

Maintain the basic structure while ensuring divs are properly aligned

Behold, my div structure! ONE // at the top level TWO THREE // two divs side by side in the middle level FOUR // residing at the bottom <div id="ONE"> <div></div> <div><img src="logo.png"></div> </div> < ...

htmlcss

Each npm command is throwing a 'TypeError' message stating that it cannot read the property 'get' of undefined

My npm installation stopped working after I changed a config parameter: Specifically, I modified the cafile parameter in the npm config, and now every npm command throws these errors: Error: EISDIR: illegal operation on a directory, read TypeError: ...

node.jsnpm

Instructions for setting up the `next` version of react-admin?

Currently grappling with the task of setting up the latest next branch for react-admin. Initially attempted yarn add react-admin#next, however, it resulted in "react-admin": "2.0.3" showing up in my package.json without the additional features exclusive t ...

npminstallationbranchyarnpkgreact-admin

Adjust the stroke and fill colors of an SVG element when hovering over it

I am facing a challenge with an SVG image that I have: https://i.stack.imgur.com/r4XaX.png When hovered over or clicked, it should change to https://i.stack.imgur.com/EHRG2.png Current Icon <svg width="24" height="24" viewBox="0 0 24 24" fill="non ...

javascriptcssreactjssvgfigma

Is there a way to have the collapsible content automatically expanded upon loading?

I came across a tutorial on w3school (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol), which demonstrates collapsible content hidden by default. The code snippet from the link is provided below. Can someone assist me in cha ...

javascripthtmlcss

Having trouble loading NEXT JS images when the file path is stored in a variable?

I'm working with Next.js for my coding project and I have a array of images that I need to incorporate into my application. CODE1 <Image src={require("../assets/image1.png")} /> This code snippet works perfectly fine and displays the ...

cssreactjsnext.jsfrontendjsx

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

javascriptcssreactjs

The ASP Classic site is not displaying the expected styles on its elements

Currently, I am revamping an ASP Classic website. The entire site relies on a major CSS file named Main which houses all the styles used. In this file, there are not many styles as the current design is quite basic. Some elements on certain pages have thei ...

htmlcssasp-classic

Is there a way to include captions within a bootstrap carousel-item without compromising the responsiveness and alignment of the indicators and controls?

<div id="myUniqueCarousel" className="carousel slide" data-bs-ride="true"> <div className="unique-carousel-indicators"> <button type="button" data-bs-target="#myUniqueCarousel" data-bs-slide-to="0" className="active" aria-curre ...

htmlcssbootstrap-5

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

I am currently working with WordPress and have created a menu using a list structure. Here is an example of how it looks: <ul> <li>Home</li> <li>About</li> <li>ParentItem <ul> <--- The heig ...

htmlcsswordpresshtml-lists