Struggling with integrating sass loader into webpack and ReactJS

Struggling to integrate .scss stylesheets into my ReactJS app using webpack configuration file with 

css-loader, sass-loader, and style-loader.

Successfully imported css into app.js using import './test.css' but facing issues with import './test.scss'.

Below is my package.json:

  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "checkbox.css": "^1.1.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.9.0",
    "eslint-plugin-react": "^5.0.1",
    "html-webpack-plugin": "^2.16.1",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }

My webpack setup includes:

  module:{
    loaders:[
      {test:/\.js$/,exclude: /node_modules/, loader: 'babel-loader'},
      {test:/\.scss$/, loaders:['style','css','sass']},
      // {test:/\.css$/, loader: 'style!css', exclude: /node_modules/},
      {test:/\.html$/, loader: 'raw-loader'}
    ]
  },

****The line mentioned above is commented out due to successful css loading step.**

In my app.js, I've experimented with 

require("!style!css!sass!./styles.scss");
and also attempted import './styles.scss' without any luck.

The current error message reads as follows: 

Uncaught Error: Cannot find module "./../../node_modules/css-loader/lib/css-base.js"

cssreactjssasswebpacksass-loader

Answer №1

It looks like your webpack configuration is in good shape, but you seem to be missing the node-sass library which is necessary for using the sass-loader, as mentioned in the sass-loader documentation.

To resolve this issue, simply install the node-sass library:

npm install node-sass --save-dev

Answer №2

It looks like your configuration is correct, but the error may indicate a problem with the css loader package. You might want to consider reinstalling it using npm i css-loader.

To import scss files, use import './file.scss', without any additional settings required through require.

If this doesn't resolve the issue, feel free to send me a link to a sample git repository that I can clone and test for you.

Answer №3

After some investigation, I was able to identify the issue.

Upon reviewing my app.js file, I discovered that I needed to include 

import '!style!css!sass!./test.scss'
instead of just using import './test.scss'. This adjustment resolved the error message that had been causing me confusion. It was interesting to note that for css files, I could simply use import './test.css' without any additional prefixes like !css!.

Answer №4

To resolve the issue, consider converting your scss files to sass extensions. It seems that sass-loader can determine the desired style based on the file extension. This approach helped me successfully rectify the problem. Another option is to use the indentedSyntax setting for sass-loader :

loaders: ['style', 'css', 'sass?indentedSyntax']

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

Guidelines for linking a promise function to a JSX component

How can we use React components to handle the result of a promise function and map it to JSX components? <Promise on={myFunc}> <Pending> ... </Pending> <Resolved> {(data: any) => ( ... )} ...

javascriptreactjs

Unleashing the Power of Resetting CSS Class Attributes in Twitter Bootstrap

Last year, @Andres Ilich shared a remarkably elegant solution for centering the navigation bar in Bootstrap. Here is an excerpt from the answer he posted: Visit here for more details. <div class="navbar navbar-fixed-top center"> <div class=" ...

javascriptjquerycsstwitter-bootstrap

The focus is on the last row that was selected

I've noticed that when I check and select a row in ui-grid, only the last selected row is focused with a background color. Should all rows be automatically painted by default? Thank you. ...

cssangularjsui-grid

Tips for ensuring uniform height across all input fields

I have created a contact form using HTML and CSS. Each input field has a small tag below to display errors, causing the adjacent field to shift downward if an error occurs. To view the live form, click here * { margin: 0; padding: 0; -webkit-box- ...

htmlcss

Applying a gradient overlay to an image using CSS

Feeling a bit frustrated with this issue. I'm working on my Joomla website utilizing Phoca Gallery, and the code it generates includes the following: <img class="pg-image" src="/images/phocagallery/other/thumbs/phoca_thumb_m_something.jpg" alt="So ...

cssimagejoomlaoverlay

changing pictures with jquery

Struggling with this code snippet: $('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow"); $('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow"); No matter which ...

javascriptjquerycss

Concealed ARIA Descriptors within HTML Tables to Enhance Accessibility for Screen Readers

I am currently working on a webpage where I need to implement a table with a header row that can be toggled between visible and hidden based on user configuration. The challenge is to ensure full accessibility for this table, especially in terms of navigat ...

htmlcsshtml-tableaccessibilitywai-aria

Sending a value to a specialized component

Presently, I am using a custom component called Search. This component is responsible for rendering a dropdown menu with different options based on the data provided. It also includes a None option by default. const Search = (props) => { const { type: ...

javascriptreactjs

Guide to utilizing asynchronous callbacks in conjunction with state management

After searching extensively, I couldn't find a solution that addressed my specific question. Most of the results were related to promises and hooks, which is not what I need assistance with. A common practice with redux-thunk involves using getState ...

reactjsreact-hooks

font-family choice in web browsers

My current goal is to configure the browser to utilize the Quicksand font, which I am sourcing directly from a file located in the same directory. When I structure the code as shown below, the browser successfully implements the Quicksand font: @charset " ...

cssfont-family

Initiate the initial setup in React using the useEffect function

My main component always requires retrieving a token before the subcomponents can be executed. According to a thread on Stack Overflow about the correct order of execution of useEffect in React parent and child components, it was noted that the subcomponen ...

javascriptreactjsrxjs

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works? What exactly do "relative to the font size" and "relative to the parent element" mean? ...

htmlcsstypography

What is the best way to fix images that appear stretched out when the containing DIV class is sized properly?

I'm currently tackling a timeline module in Elementor/Wordpress. Even though the image is uploaded correctly and displayed properly in the Wordpress gallery with the correct proportions, it appears distorted. The <div class="eael-content-timeline- ...

htmlcsswordpressimageelementor

unable to utilize react-speech-recognition package

Looking for a simple react package that can convert user audio to text? I recently installed one and tried its basic code example, only to encounter an error message stating "RecognitionManager.js:247 Uncaught ReferenceError: regeneratorRuntime is not defi ...

javascriptreactjsnpmspeech-recognitionautomatic-speech-recognition

The constructor and render method are invoked twice

I am troubleshooting a simple component where I noticed that the constructor and render function are called twice every time I reload the browser. Can someone assist me in identifying the reason behind this behavior? Below is the code snippet along with t ...

reactjs

CSS hover effects are not displayed when using the input type button

I'm having issues with my hover effects not showing: <input type="button" class="button" value="Click"> However, this code works fine: <button class="button">Click</button> The CSS codes are ...

htmlcssanimationcss-animations

What is the best way to set the minimum height for a floated DIV element

Struggling to apply a min-height to a floated DIV in an XHTML or HTML document. The workaround of nesting a fixed-height DIV and clearing it with :after is ineffective. Directly setting a min-height does not produce the desired result. The current code, w ...

cssxhtmlhtml

An ongoing issue is occurring with React Context causing a loop to form while trying to fetch user

One interesting feature I've been working with is a React Context that allows me to store and reuse data within my React project. Here's the code snippet I've been focusing on: import React, { useState, createContext } from "react" ...

reactjsreact-hooksreact-contextreact-statereact-state-management

The suffix input-group-addon in Bootstrap 3 is not properly connected to the form field

Utilizing Bootstrap 3 within a C# ASP.NET MVC5 project. I've encountered a peculiar issue while attempting to use input-group-addon to append a 'GB' suffix to a form field. Here is the C# code snippet: @using (Html.BeginForm()) { @Htm ...

c#csstwitter-bootstrap

Converting Dates from MongoDB Date.now to a Different Format in ReactJS

Working with MongoDB and ReactJS. Currently, when a new Project is created, MongoDB displays the date format as "2018-10-08 18:09:56.628". However, I only want to show "2018-10-08" to the user. Is there a way to achieve this? Schema for My Project: cons ...

mongodbreactjsdateschema