Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors.

Here are the style imports in my App.js:

import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";
import "./scss/styles.scss";

Upon installing node-sass, I faced the error message: 

Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.

After uninstalling node-sass and installing version 4.14.1, the compatibility issues were resolved but gave rise to a new error:

./src/scss/styles.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/scss/styles.scss)
undefined
^
      Invalid CSS after "  */": expected selector, was "(function (global, "
      in C:\Users\Stephanie\Documents\Projects\BidRL\bidrl-front\node_modules\bootstrap\dist\js\bootstrap.js (line 6, column 1)

When I commented out the custom SCSS import in app.js, the compilation was successful, but I'm determined to make my custom SCSS work.

Some posts suggested upgrading Node, so I went from v14.15.5 to v16.3.0, only to encounter another error:

Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)

Reinstalling node-sass without specifying any versions ("node-sass": "^6.0.0") brought me back to the compatibility error.

I also attempted saving as dev dependencies with no luck:

  "devDependencies": {
    "node-sass": "^6.0.0",
    "sass-loader": "^7.1.0"
  }

Any solutions to this issue?

cssnode.jsreactjssassnode-sass

Answer №1

After encountering an invalid CSS error, I found a solution by simply commenting out the import of Bootstrap in my scss file:

// Necessary Imports
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

$theme-colors: (
  "primary": #fb7906,
);

/* Bootstrap import */
@import "bootstrap"; //I OPTED TO COMMENT OUT THIS LINE AND THE ISSUE WAS RESOLVED

Answer №2

Ensure to import css instead of scss in app.js or any other file where css is being imported. Running scss script will generate a css file which should be the one imported.

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

Headers cannot be set once they have already been sent in an express js application

After reviewing various responses to this query, I am baffled as to why this error keeps appearing despite having res.send() in multiple paths. In my code (expressjs 4.13), it looks something like this: var user ={ username: "some", password: "a" ...

javascriptnode.jsexpress

Is there a way to configure `eslint-plugin-react-hooks` to properly lint functional components that are exported as the default export?

I have intentionally crafted a basic functional component that violates hook rules. Here is the code snippet: if (Math.rand > 0.5) { const [name, setName] = useState("fred"); } I assumed that eslint-plugin-react-hooks would catch this error, b ...

reactjseslintreact-hookstypescript-eslint

Is it possible to combine CSS with Tailwind, Bootstrap, or other frameworks when building a React application?

Is it possible to combine CSS with Tailwind, Bootstrap, or other styling frameworks in a React application? ...

reactjs

Troubleshooting Cross-Origin Resource Sharing problem in launching Next.js 13 application on Vercel with MongoDB integration

Having trouble with CORS errors while trying to deploy my Next.js 13 application on Vercel, especially when using a MongoDB-based API. The API is for basic CRUD operations, and here is how I currently have my fetch set up: // individual PUT/DELETE/GET ...

reactjsnext.jscorsvercel

Using the MongoDB aggregation framework with nested external documents can be achieved by integrating Mongoose and NodeJS

My Mongoose schemas are as follows: // User schema exports.User = new Schema({ name: { type: String, required: true }, home: [{ type: mongoose.Schema.Types.ObjectId, ...

node.jsmongodbmongooseaggregation-framework

Guide on crafting a Dockerfile for executing Cypress tests alongside a Node.js server

I am facing a challenge with my Cypress tests and the integration of services that interact with a remote database. Moreover, I have a crucial Node.js server that needs to send emails in case of errors. The project structure is depicted below: https://i.s ...

node.jsdockerunit-testingtestingcypress

Encountering an error when using setState with React.createElement: invalid type provided

https://i.sstatic.net/YHssU.png Anticipated Outcome Upon clicking the login button without inputting an email or password, the user is expected to view the Notification component. Actual Outcome Upon clicking the login button, the setState function is ...

javascriptreactjssetstate

Voice xml:lang="en-US" xml:gender="Female" name="Microsoft Server Speech Text is consistently spoken in a female tone."

I'm currently working on a function that converts text to speech, but I'm facing an issue where the conversion always defaults to a female voice despite specifying the xml:gender as male. Here is my function - is there a way for me to change the ...

node.jsspeech-recognitiontext-to-speechazure-cognitive-servicesbing-speech

The re-rendering feature in React is not triggered when combining useRef with useImperativeHandle

In my editor App, I have 3 elements: MenuBar, EditorContent, and a div for code view. The MenuBar contains buttons that switch the view of the editor between rich text and code view. This functionality is controlled by the following code: let [isCodeViewMo ...

reactjs

What is the best method for displaying the index page in node.js using ejs-templating instead of traditional express.static content?

When using a restaurant food menu generator, I am able to view it with HTML by utilizing the following code: app.get('/', function (req, res) { res.sendFile(__dirname + '/views/index.html'); }); This method uses express static. Bu ...

node.jsexpressnpmejs

Expanding the typings for an established component in DefinitelyTyped

Is there a way to define new typings for additional props in DefinitelyTyped? After updating the material-ui library with some new props for the SelectField component, I realized that the typings in DefinitelyTyped are outdated. Is it possible to extend th ...

reactjstypescriptmaterial-uitypescript-typingsdefinitelytyped

Creating visually appealing Jquery-ui tab designs

Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...

jqueryhtmlcss

What is the process for interacting with DOM Elements in Node JS?

JAVASCRIPT FILE const path = require('path'); const http = require('http'); const fs = require('fs'); const dir = '../frontend/'; const server = http.createServer((request, respond) => { console.log(reques ...

javascripthtmlnode.js

Retrieve the Typescript data type as a variable

I have the following components: type TestComponentProps = { title: string; } const TestComponent: React.FC<TestComponentProps> = ({ title, }) => { return <div>TestComponent: {title}</div>; }; type TestComponent2Props = { bod ...

javascriptreactjstypescript

What tools and languages are best for creating a live feed of updates for your audience?

Looking to create a real-time newsfeed for followers similar to Twitter, but not sure which tools would be the best fit. The solution needs to be production-ready and provide fast request-responses. I've experimented with node.js + socket.io + rabbitm ...

node.jswebsocketreal-timerabbitmqtornado

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

Personalized design for Material Tooltip in Angular 17

I am currently working on an angular 17 application that utilizes the latest Material components. My project heavily incorporates the Tooltip component, but I am facing challenges when it comes to customizing it to my preferences. While I did succeed in c ...

angularsassangular-materialtooltipangular-material-theming

Implementing tailwindcss styles in a typescript interface with reactjs

In my code, I have a file named types.ts that defines an interface called CustomCardProps. I pass this interface to the CustomCard component within the home.tsx file. Additionally, I have a folder named constant with an index.ts file where I store values o ...

reactjstypescripttailwind-css

"Exploring the best locations for storing CSS, JS, and image files in Spring

Having trouble figuring out where to place my public files. I attempted the solution mentioned in this thread on Stack Overflow but it didn't work for me. I've tried putting my public folder in various locations within the WEB-INF directory, but ...

cssspring-mvc

When the child of li is clicked instead

Below is a list I have: <ul id="orderlist"> <li id="2"> <span class="pull-right value">Ready</span> <img src="" class="img-responsive"> Filet Mignon <small>2 servings</small> <small ...

javascriptcss