Question

我正在研究react.js项目，并尝试使用CSS模块。我们有反应脚本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模块不起作用吗？

Answer 1

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

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

如果这不起作用，则可能是标题案例中存在问题。尝试更改文件名并导入到App.module.css（根据这些文档：https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet）

CSS模块导入未将CSS应用于“反应脚本”的HTML：“ 2.0.4”

1 个答案: