Импорт модулей CSS не применяет CSS к html для «activ-scripts»: «2.0.4» - PullRequest
Новая
       7

Импорт модулей CSS не применяет CSS к html для «activ-scripts»: «2.0.4»

0 голосов
/ 20 октября 2018

Я работаю над проектомact.js и пытаюсь использовать модули css.У нас есть response-scripts 2.0.4, который должен включать модули css.Однако при импорте файла CSS он возвращает пустой объект.

У меня есть файл CSS App.modules.css 

.gridLayout {
    display: 'grid';
    grid-template-areas: 'sideBar sideBar mainBody mainBody mainBody';
}

.sideBar {
    grid-area: 'sideBar';
}

.mainBody {
    grid-area: 'mainBody';
}

В моем App.js 

import styles from './App.modules.css';
console.log(styles);
....

Выходные данные: {}

и при проверке страницы, похоже, не применяется css.

Также

Когда я пытаюсь запустить npm run build

Выдает эту ошибку с помощью css 

> deedee@0.1.0 build /Users/sdrafahl/code/DeeDee
> react-scripts build

Creating an optimized production build...
/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/async.js:61
        fn = function () { throw arg; };
                           ^

Error: Chunk.entrypoints: Use Chunks.addGroup instead
    at Chunk.set (/Users/sdrafahl/code/DeeDee/node_modules/webpack/lib/Chunk.js:829:9)
    at /Users/sdrafahl/code/DeeDee/node_modules/extract-text-webpack-plugin/dist/index.js:176:40
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/Users/sdrafahl/code/DeeDee/node_modules/extract-text-webpack-plugin/dist/index.js:171:18)
    at Compilation.applyPluginsAsyncSeries (/Users/sdrafahl/code/DeeDee/node_modules/react-scripts-cssmodules/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (/Users/sdrafahl/code/DeeDee/node_modules/react-scripts-cssmodules/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/Users/sdrafahl/code/DeeDee/node_modules/react-scripts-cssmodules/node_modules/webpack/lib/Compiler.js:508:17)
    at /Users/sdrafahl/code/DeeDee/node_modules/react-scripts-cssmodules/node_modules/tapable/lib/Tapable.js:289:11
    at /Users/sdrafahl/code/DeeDee/node_modules/react-scripts-cssmodules/node_modules/html-webpack-plugin/index.js:60:9
    at tryCatcher (/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/promise.js:694:18)
    at _drainQueueStep (/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/async.js:138:12)
    at _drainQueue (/Users/sdrafahl/code/DeeDee/node_modules/bluebird/js/release/async.js:131:9)

Кто-нибудь знает, почему не работают модули css?

1 Ответ

0 голосов
/ 20 октября 2018

Посмотрите на ваш импорт, в имени файла есть опечатка.Попробуйте изменить его на

import styles from './App.Module.css';

Если это не сработает, возможно, проблема связана с тем, что он находится в заглавии.Попробуйте изменить имя файла и импортировать на App.module.css (для этих документов: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet)

...