N
N
Nikolay Matyushkin2019-02-28 20:14:33
Sass
Nikolay Matyushkin, 2019-02-28 20:14:33

SCSS and React 16.8.2. Why does not read the file with styles?

Hello. I'm starting to understand the power of React. There was a hitch.
I want to use sass/scss styles in my react project (v. 16.8.2). I installed the sass-loader dependency, there are no errors, the project is loaded, but the styles are not loaded. I imported correctly using import './Nav.sсss' despite the fact that the file where I include the styles is in the same directory. I google on the question that interests me, I get an answer like do npm run eject, find 2 files in the config folder and change "... this ..." to "... this ..."
Okay, only recently I believe that in the config folder there is 1 file called webpack.config.js in which 2 files from previous versions of react were combined. It describes the functions that are called below in the same file. Below I am attaching an excerpt of the SCSS connection that interests me, and it seems like the modules are enabled, but the styles are not loaded. Please help me connect scss to react, thanks in advance!

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                },
                'sass-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question