CSS 模块导入未将 css 应用于 "react-scripts": "2.0.4" 的 html

Question

我正在做一个 react.js 元素并尝试使用 css 模块。我们有 react-scripts 2.0.4，它应该包含 css 模块。但是，当导入 css 文件时，它返回一个空对象。

我有一个CSS文件应用程序模块.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 模块不起作用吗？

Answer 1

查看您的导入，文件名中有错别字。尝试将其更改为

从 './App.Module.css' 导入样式；

如果这不起作用，可能是标题大写的问题。尝试更改文件名并导入到 App.module.css(根据这些文档:https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet)