Javascript 如何通过css模块将样式应用于react组件

我在将样式应用到我的组件时遇到问题。 我通过Yeoman为我的项目生成了模板。它创建了很多配置文件，不仅仅是webpack.config.js，因此我有点困惑。正如react generator的自述文件所述，它支持开箱即用的一些功能，而无需安装： *支持的不同样式语言（sass、scss、less、手写笔） *通过PostSS实现样式转换 根据这一点，我展示了部分

cfg/default.js

“严格使用”；
const path=require（'path'）；
const srcPath=path.join（_dirname，'/../src'）；
常数dfltPort=8000；
函数getDefaultModules（）{
返回{
预紧器：[{
测试：/\（js|jsx）$/，
包括：srcPath，
加载程序：“eslint加载程序”
}],
装载机：[
{
测试：/\.css$/,，
加载器：“样式加载器！css加载器！postcss加载器”
},
{
测试：/\.sass/,，
加载器：“样式加载器！css加载器！postcss加载器！sass加载器？outputStyle=扩展和缩进语法”
},
{
测试：/\.scss/，
加载器：“样式加载器！css加载器！postcss加载器！sass加载器？outputStyle=expanded”
},
{
测试：/\.小于/，
加载器：“样式加载器！css加载器！postcss加载器！更少加载器”
},
{
测试：/\.styl/,，
加载器：“样式加载器！css加载器！postcss加载器！手写笔加载器”
}，

请注意，在您的加载程序测试属性（例如test:/.scss$/）上添加$是很好的，以便只匹配我相信的文件末尾

我以前从未见过“从“../../styles/todosStyle.scss”导入样式” 这类代码表示您正在从sass文件导出样式，也许导入*作为样式…可能会起作用，但我没有使用这种方法

试试这个。 需要（'../styles/todosStyle.scss'）； 这将把css与javascript捆绑在一起。 然后，只需像通常在渲染函数上一样使用该类

---

另请注意，如果您想为css创建一个单独的文件，您可以使用插件来完成此操作。

您正在使用css模块，但尚未在网页包配置中打开它们：

loader:'style loader！css loader！postss loader'

变成

loader:'style loader！css loader？modules！postss loader'

根据css加载程序自述