Tips for integrating Sass into a React application with bundle.js and bundle.css

I'm currently working on a React project that uses bundle.js/bundle.css, which are linked in the index.html like this:

<script src="/bundle.js"></script>
<link rel="stylesheet" href="/bundle.css" />

Initially, I had my CSS code in the "client/style.css" file, and everything was running smoothly.

Now, I want to switch to using Sass/scss. Here's what I've done so far:

  • I installed Dart Sass, which is now in my devDependencies as: 
     "sass": "^1.32.8"
  • I created a "main.scss" file and transferred my CSS code into it.
  • In package.json, I added a script to compile the scss into css: 
    "compile:sass": "sass client/sass/main.scss client/style.comp.css"
  • I then ran the script in the command line: compile:sass
  • This process generated two new files next to my "style.css" -> "style.comp.css" and "style.comp.css.map"

While I can see the compiled styles in "style.comp.css", they are not being applied in the browser. Can anyone assist with this issue?

cssreactjswebpacksassbundle

Answer №1

As I was drafting this question, I stumbled upon a resolution. Although I cannot claim it to be the most optimal fix, it did the job :) Please do share your insights or solutions if you have a more efficient method or additional details.

It turned out that the issue stemmed from bundle.css searching for modifications in "style.css".

  • Upon reviewing the "scripts" section in "package.json", I noticed the following entry: 

    "compile:sass": "sass client/sass/main.scss client/style.comp.css"

  • I rectified the file name by removing the "comp." prefix, which indicates where the scss code should be compiled: 

    "compile:sass": "sass client/sass/main.scss client/style.css"

Subsequently, I deleted the previously generated files "style.comp.css" and "style.comp.css.map", and executed the command in the Terminal once more:

  • compile:sass

Voilà - the code was compiled into "style.css" and displayed correctly in the browser.

Moreover, I want to share this insightful and relevant tidbit:

If you retain the code in its current state, you'll need to repeatedly execute this command to view any saved alterations: compile:sass.

Hence, I included this script: 

"watch:sass": "sass client/sass/main.scss client/style.css --watch"
,

Upon running this command in the Terminal, it will automatically detect changes and refresh the browser: watch:sass.

Trust this proves beneficial! Should there be superior solutions, I'll give them an upvote / designate them as the preferred solution / integrate them into this response.

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

Verifying the status of a checkbox label in Java using Selenium

I am currently working on an automation project using Selenium and I'm struggling to figure out how to check the status of a checkbox input. Has anyone else encountered this issue before? Here is a sample code snippet in JavaScript with jQuery: $("i ...

javacsshtmlseleniuminput

Navigating events with Electron and Vue (Single Page Application)

I've been struggling to understand how to handle events in Vue with Electron. Despite reading the documentation and testing Vue instances and directives in the browser successfully, I can't seem to get it working in my Electron desktop app (which ...

event-handlingwebpackvue.jselectronvue-component

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

javascriptjqueryhtmlcsssafari

To close the menu, simply tap on anywhere on the screen

Is there a way to modify a script so that it closes the menu when clicking on any part of the screen, not just on an 'li' element? $(function() { $('.drop-down-input').click(function() { $('.drop-down-input.selected').rem ...

javascriptjqueryhtmlcss

Resolving audio problems in JSSIP and React

I am currently utilizing jssip 3.2.10 to initiate calls within a React project. The server has been configured on Asterisk and CentOS. Although I can make calls successfully where the recipient can hear me clearly, I am unable to hear their audio or the ...

reactjssipjssip

Upon navigating to a different page, retrieve data exclusively from the backend when uploading to HEROKU

My MERN app is running smoothly locally, but I encounter an issue when I deploy it to Heroku. When I navigate to a new page, only the backend data is displayed: Accessing "recipes" route However, everything works fine when I run it locally: Navigating to r ...

node.jsreactjsherokumern

Interactive state for associated product within list without order

I am currently working on a project that involves an unordered list with separate list items. The menu design includes product images in the top list item and the corresponding product names in the list item below. I have successfully implemented a hover s ...

javascriptjqueryhtmlcssonmouseover

The onClick function is failing to log the desired output for the set item

Currently, I am working on a React code that adds a value to a list when a button is clicked, and then logs the list in the same block. However, my issue is that the logging is displaying the previously entered string. For example, if I enter "apple" and t ...

reactjs

There are occasions when Firebase fails to keep the values up to date

Recently, I've been working on a web application using React. One issue I've encountered is that the checkbox value doesn't always update properly when creating or modifying tasks in the UI. It seems to happen randomly with certain tasks. I ...

reactjsfirebasetransactions

Send a file from a form using Gatsby to getform.io using the axios library

I am facing an issue with my getform.io form where the file is not getting uploaded properly. The file appears as [] and the files tab remains empty. Upon checking the network tab, I noticed that my request payload includes {email: "[email protec ...

javascriptreactjsaxios

Center the font in the middle of the text field

I'm having a text field with a jQuery hint. How do I align the font to be in the middle? I've attempted using vertical-align: middle but it doesn't seem to work. <style type="text/css"> #name { border: 1px solid #c810ca; heig ...

htmlcssforms

How to implement a pop-up dialog box with multiple input boxes using AngularJS?

If you click on the link below: https://material.angularjs.org/latest/demo/dialog You'll notice that the prompt dialog box features only one input field. I'm curious to know if it's possible to customize this using mdDialog to include mult ...

javascripthtmlcssangularjs

HTML: arranged <pre> with fixed positioning

I currently have a centered column of text with a fixed width. However, I am looking to break that fixed width for certain tags like <pre> so that they can fill the full screen width while maintaining flow with the rest of the text. My CSS snippet s ...

htmlcsslayout

What sets classes prop apart from className prop in Material-UI when adding custom styles?

Can anyone explain the difference between the classes prop in Material-UI (mui) and the className attribute? It seems like they both serve the same purpose, but I want to clarify that I am not referring to the classes variable within the component which co ...

reactjsmaterial-ui

Guide on incorporating a YouTube iframe in React with Typescript

It appears that Typescript is posing some challenges for me in this scenario. Here's the code snippet I am trying to include: <iframe width="560" height="315" src="https://www.youtube.com/embed/BLAH?showinfo=0" frameBorder="0" ...

reactjstypescriptyoutube

Tips on setting pre-defined data in a ReactJS form builder field

Currently, I am utilizing the reactjs-form-builder to create forms within a React.js environment. Below is an excerpt of my fields object: this.state = { id: null, loading: true, fields: { "fields&qu ...

javascriptreactjs

React form not resetting input fields after successful POST request

Seems like the setState function in the addUser() method is not working as expected. The POST request is successful, but the input fields are not clearing, causing inconvenience for the users. It might be helpful to have another set of eyes to identify t ...

formsreactjshttp-post

What is the best way to handle responses in axios when dealing with APIs that stream data using Server-Sent Events (S

Environment: web browser, javascript. I am looking to utilize the post method to interact with a Server-Send Events (SSE) API such as: curl https://api.openai.com/v1/completions \ -H "Content-Type: application/json" \ -H ...

javascriptnode.jsreactjsvue.jsaxios

What happens when you implement redirects in `next.config.js` and also use `@next/bundle-analyzer`?

In the configuration file next.config.js, I've included the following code: module.exports = withBundleAnalyzer({ pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'], experimental ...

javascriptwebpacknext.js

Personalized message within the Material-UI Select element

Incorporating MUI's Select feature into my React app allows users to choose from a list of options. Yet, we now have a need for users to input custom text within the MUI Select field in order to create a new option. I'm seeking guidance on how t ...

reactjsmaterial-ui