Issue connecting styles.scss in React App

Asked
Active3 hr before
Viewed126 times

8 Answers

connectingreactissue
90%

I am having an issue with my React App connecting style.scss file. I think everything looks good to me on webpack a package.json but for some reason, it doesn't wanna works.,Connect and share knowledge within a single location that is structured and easy to search.,Thanks for contributing an answer to Stack Overflow!

Try this configuration:

{
   test: /\.css$/,
   loader: ['style-loader', 'css-loader'],
}, {
   test: /\.s(a|c)ss$/,
   use: [{
         loader: 'style-loader',
      },
      {
         loader: 'css-loader',
         options: {
            // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
            // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
            importLoaders: 1,
            // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
            modules: {
               auto: true
            },
         },
      },
      {
         loader: 'sass-loader',
      },
   ],
},
load more v
88%

Inside the react-app folder, some folders are saved by default, such as node-module, public, and source. When creating a program, all HTML codes are saved in the public folder and the rest (script, style, etc.) in the source folder. ,Unsaved Files in the Source Folder,Not saving the file in the source folder

1
import React, {
   Component
} from 'react';
2
import ReactDOM from 'react-dom';
3
import '../CSS_Files/style.css';
load more v
72%

So we have a project which uses create-react-app and node-sass.,I have encountered this error many times over the last 2-3 months. I thought it was only happening to me, but now my colleague sometimes encounters this issue as well.,I believe this has been resolved in the latest version of node-sass. Please comment here if it's not resolved.

{
   "name": "ParentPortal",
   "version": "0.1.10",
   "private": true,
   "eslintConfig": {
      "extends": "react-app",
      "env": {
         "jest": true
      }
   },
   "devDependencies": {
      "@octopusdeploy/octopackjs": "0.0.7",
      "bootstrap-sass": "^3.3.7",
      "enzyme": "^2.7.1",
      "flow-bin": "^0.41.0",
      "font-awesome": "^4.7.0",
      "node-sass": "^4.5.0",
      "npm-run-all": "^4.0.1",
      "react-addons-test-utils": "^15.4.2",
      "react-scripts": "^0.9.5",
      "react-test-renderer": "^15.4.2",
      "zip-dir": "^1.0.2"
   },
   "dependencies": {
      //
   },
   "scripts": {
      "build-css": "node-sass src/ -o src/",
      "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
      "start-js": "react-scripts start",
      "start": "npm-run-all -p watch-css start-js",
      "build": "npm run build-css && react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject",
      "flow": "flow",
      "publish": "node scripts/deploy.js"
   }
}
load more v
65%

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton> and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render (but not inherit).,Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.,Building your AppInstalling a DependencyImporting a ComponentUsing Global VariablesAdding BootstrapAdding FlowAdding TypeScriptAdding RelayAdding a RouterEnvironment VariablesMaking a Progressive Web AppMeasuring PerformanceCreating a Production Build

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Adding Sass to create-react-app is one of the first things most developers do when starting an application. ,Here's a deeper dive. In order to add Sass to a Create React App application, we need a single command:,The steps to add Sass to Create React App are:

javascriptimport './App.scss';
load more v
40%

There seems to be a number of ways of styling React components used widely in the industry for production level work:,Dependencies: styled-components,There are a number of other CSS-in-JS libraries to consider depending on your needs. Some popular examples include:

Pretag
 Pretag team - issue, fix, solve, resolve
22%

To include the stylesheet in your application, open Home.js and change the import of App.css to the following.,Congratulations, you should now see something like this in your browser.,Create a new file called src/Calculator.js and paste the following code into it.

node - v
load more v
60%

Webpack’s css-loader allows you to import the class names directly into your JavaScript by replacing the class identifier with a globally unique string during build time.,In one of my most recent projects, we didn’t have any global CSS classes. We didn’t apply string classes (.btn) or secondary classes (.btn--secondary) to our DOM elements, yet we still built out some pretty complicated designs. You can see our end product at Clover’s homepage. All of our classes were locally scoped utilizing SCSS and css-modules. With the help of css-loader and webpack, we imported our styles and class names directly into our React apps.,The other benefit of BEM is how it documents the way the initial author meant for a class to be used. For example, if I had the following SCSS, would you be able to guess how the classes are meant to interact and conditionally be applied?

Pretag
 Pretag team - issue, fix, solve, resolve

Other "connecting-react" queries related to "Issue connecting styles.scss in React App"