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

Complications arising from IE when using strict doctype with CSS and jQuery

Here's the code I'm using for a sliding caption effect on my gallery site: I specifically implemented the last effect which is the Caption Sliding (Partially Hidden to Visible). $('.boxgrid.caption').hover(function(){ $(".cover", th ...

jquerycssinternet-explorer

Error in Node.js (NPM Error)

Recently, I purchased a VPS running Ubuntu 14.4 and successfully installed Node.js 1.4. However, when attempting to run my script (node tradebot.js), I encountered the following error message! :-/ module.js:327 throw err; ^ Error: Cannot find ...

javascriptnode.jsnpm

Unable to locate the module 'run-script.js' (Firebase CLI, npm, node.js)

After upgrading my system, I encountered an issue while trying to compile a Firebase cloud functions project that was previously functioning correctly. Upon executing the command: firebase deploy --only functions An error message appeared as follows: i ...

node.jsfirebasenpm

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

htmlcssmacostwitter-bootstrap

Artwork expanding incorrectly on HTML canvas

I'm encountering an issue while attempting to draw on an HTML canvas. I've specified 50 circles and multiple lines within a canvas of size 1000x1000 px, but not all circles are appearing as expected. My assumption is that the elements are being ...

javascriptcsshtmlcanvas

Navigating the rollout of a fresh new design

When implementing a new design on a website, how can you bypass the need for users to clear their browser cache in order to see the updated changes? Is there a way to automatically refresh the cache once a new version of the website is uploaded, or are th ...

javascriptphphtmlcssapache

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

javascripthtmlcssreactjs

"Enhancing the appearance of sorted divs using CSS3 animations in jQuery

Looking to enhance the sorting functionality of divs using jQuery by incorporating CSS3 transition animations for smoother transitions. Encountering an issue where the CSS3 transition animation is not functioning as expected, currently investigating the r ...

jquerycss

The caret operator in NPM does not automatically install the latest minor version of a package

Within my package.json file, one of the dependencies listed is labeled as... "@packageXXX": "^0.7.0", Upon running the "npm outdated" command, I observed that... @packageXXX current: 0.7.0 wanted: 0.7.0 latest: 0.8.0 Despite executing "npm ...

javascriptnpm

What steps can be taken to turn this html code and css into a mobile application?

I have begun working on my HTML and CSS but need some guidance to create a mobile app without needing to resize it when accessed through the web. Additionally, I would like to make it responsive in CSS. Can you provide me with the necessary code? @c ...

htmlcss

JS Issue with Generating Content

Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...

javascripthtmlcsslistclass

Adjust the width of a DIV based on the content of other DIVs, and float and center them all

Initially, what seemed like a simple task has turned out to be more complicated than I anticipated. Here is my code: <html> <head> <style> div { border-top: 1px solid black; margin: 10px; } div#all { border: 0; } </style> <body ...

htmlwidthcss

Move the focus to the previous input field by removing the key

I have created a phone number input with 10 fields that automatically skip to the next field when you fill in each number. However, I would like to be able to go back to the previous field if I make a mistake and need to delete a digit. How can I achieve ...

javascriptjqueryhtmlcssinput

Incorporating a d3 chart into an Angular 4 project

Currently, I am in the process of developing an Angular application using TypeScript. My aim is to incorporate a force directed network graph from Mike Boston built with d3, which can be viewed here. After successfully translating most of the code to Type ...

node.jsangulartypescriptd3.jsnpm

Ways to run Node.js scripts within PHP

I've been diving into a project that involves using purify-css https://github.com/purifycss/purifycss After successfully installing purify-css on the server with npm, I've been attempting to run the command below through PHP using the exec() ...

phpnpmexecnodespurifycss

Is it possible for me to run npm commands directly within Visual Studio?

Is it possible to run npm commands (such as npm init, npm install) directly from Visual Studio 2017 on an Asp.Net Core 2.0 project? Perhaps through the command line or a context menu option? Currently, I have a context menu command for Bower when right-c ...

c#npmasp.net-coreasp.net-core-mvcvisual-studio-2017

DOMPDF - Comparing background URL rendering between Linux and Windows

When converting HTML to PDF, my image doesn't show on a Linux server. On localhost, the image displays properly. Here is my CSS code: background: red url("<?php echo __DIR__ ?/my_img.png"); However, on the Linux server, the image does not appea ...

phphtmlcsslinuxdompdf

The process of necessitating a project file from an npm package

I am working with an npm module that needs a configuration file provided by the user. Is there a way to instruct this module to search for a specific file in the user's directory? Here is what I am looking for: Within the module const config = requ ...

node.jsnpmmoduleconfigrequire

Spin a Material UI LinearProgress

I'm attempting to create a graph chart using Material UI with the LinearProgress component and adding some custom styling. My goal is to rotate it by 90deg. const BorderLinearProgressBottom = withStyles((theme) => ({ root: { height: 50, b ...

javascriptcssreactjsmaterial-uirotation

Update the appearance of a cell if the value within it is equal to zero

I have discovered a way to achieve this using inputs. input[value="0"] { background-color:#F7ECEC; color:#f00;} Now, I am looking for assistance in applying the same concept to table cells. Can anyone provide guidance? Thank you. ...

javascripthtmlcss