Что может отсутствовать в моем проекте React, когда стили CSS не применяются к моим компонентам? - PullRequest
Новая
       18

Что может отсутствовать в моем проекте React, когда стили CSS не применяются к моим компонентам?

0 голосов
/ 08 февраля 2020

Я новичок в React и не могу понять, почему css не работает в моем проекте. Я понимаю, что в React мы используем CSS не напрямую, но это интерпретируется и понимается как JavaScript только при использовании webpack и babel.

Что я пробовал? Я думал, что меняю свой веб-пакет .config. js файл будет работать, но я не уверен, где внести изменения и что изменить. Я следил за некоторыми потоками в StackOverflow, которые вносят изменения для загрузки CSS модулей в проекте. Но я не уверен в реализации этого, так как в моем webpack.config. js, по-видимому, уже есть модули css по умолчанию, поэтому я считаю, что у меня есть активные-скрипты v3.3, где у нас есть CSS Модули по умолчанию.

Версия моих реактивных скриптов - 3.3. Также я использую соглашение об именах как ComponentName. css и то же самое при импорте этого компонента css файл. Я не использую ComponentName.modules. css именование файлов. Я не уверен, что мне не хватает некоторых ссылок css / bootstrap в одном из основных файлов проекта. Пожалуйста, предложите, если мы сделаем это где-нибудь, как в Index. js или около того. Вот мой -

webpack.config. js file: 

// "postcss" loader applies autoprefixer to our CSS.
                    // "css" loader resolves paths in CSS and adds assets as dependencies.
                    // "style" loader turns CSS into JS modules that inject <style> tags.
                    // In production, we use MiniCSSExtractPlugin to extract that CSS
                    // to a file, but in development "style" loader enables hot editing
                    // of CSS.
                    // By default we support CSS Modules with the extension .module.css
                    {
                      test: cssRegex,
                      exclude: cssModuleRegex,
                      use: getStyleLoaders({
                        importLoaders: 1,
                        sourceMap: isEnvProduction && shouldUseSourceMap,
                      }),
                      // 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 (https://github.com/css-modules/css-modules)
                    // using the extension .module.css
                    {
                      test: cssModuleRegex,
                      use: getStyleLoaders({
                        importLoaders: 1,
                        sourceMap: isEnvProduction && shouldUseSourceMap,
                        modules: {
                          getLocalIdent: getCSSModuleLocalIdent,
                        },
                      }),
                    },

1 Ответ

0 голосов
/ 10 февраля 2020

В webpack.config. js: я сделал несколько изменений, а также перед этим удалил папку node_build из своего проекта и выполнил команду npm установить с терминала.

Изменения можно увидеть здесь по сравнению с приведенным выше файлом: у меня добавлена ​​строка - modules: true и удалили строку - sourceMap: isEnvProduction && shouldUseSourceMap в мой файл webpack.config. js. Пожалуйста, сравните приведенный выше снимок файла и этот ответный снимок файла с ответом, чтобы обнаружить эти изменения.

ВАЖНО: В нескольких найденных мной старых постах и ​​видео на YouTube я увидел, что : после добавления следующих строк: 

modules: true,
localIdentName: `[hash:base64:...]`,

Параметр localIdentName теперь не принимается как объект для вызова API, который мы выполняем через эту строку. И, таким образом, он выдает ValidationError, поэтому удаление этой строки сработало для меня, так как моя версия response-scripts - 3.3, а для кого-то, у кого - response-scripts версии 1 ... эта строка все еще могла бы работать!

...