反应 CSS 模块，不工作。一些想法？答案

【问题标题】：React CSS Modules, Is not working. Some Idea?反应 CSS 模块，不工作。一些想法？
【发布时间】：2017-04-03 09:28:28
【问题描述】：

我安装了所有的依赖：

    "devDependencies": {
      "css-loader": "^0.26.4",
      "sass-loader": "^6.0.3",
      "style-loader": "^0.13.2
    }

捆绑包正确检测到我的导入：

import styles from './styles.scss';

然后我配置了我的 webpack 配置：

module : {
    loaders : [
        {
            test: /\.(sass|scss)$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
            test : /\.jsx?/,
            include : APP_DIR,
            loader : 'babel-loader'
        }
    ]
}

但在最终渲染中没有出现类。有什么想法？谢谢！！！

【问题讨论】：

您看到什么样的错误？
@KornholioBeavis 这就是问题所在。我看不到任何错误。 bundle没问题，但是在最终的渲染中，类没有出现在html标签中。
如果你调试对象，它会给你一个 undefined 以外的值吗？
你的项目中真的包含了 react-css-modules 吗？
你需要将css导入到使用webpack生成的css的顶部根组件中。

标签： reactjs sass webpack

【解决方案1】：

我知道这不是完美的解决方案，但有效：在我的项目中，css 被捆绑在一个 bundle.css 文件中，我的设置是：

1.在组件中我得到： import "./User.css";

2.在 webpack 配置中： var ExtractTextPlugin = require('extract-text-webpack-plugin');

3.然后在 webpack 配置模块部分：

module: {
    loaders: [
        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
        { test: /\.js$/, loader: "source-map-loader", enforce: "pre" },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: "css-loader",
            })
        }
    ]
},
plugins: [
new ExtractTextPlugin('../css/[name].css')
]

【讨论】：

【解决方案2】：

你的 jsx 测试值是错误的，不是吗？必须是

{
    test : /\.jsx$/,
    include : APP_DIR,
    loader : 'babel-loader'
}

【讨论】：