webpack使用css-loader和style-loader不起作用

Question

webpack正确加载了css-loader和style-loader但是不加载样式。

webpack.config.js

const path =require('path');
module.exports = {
    entry: "./src/main.js",  //入口文件
    output: {
        path: path.join(__dirname,"/output/"),    // 所有输出文件的目标路径
        filename: "main.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/, // babel 转换为兼容性的 js
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                ],
            },
        ]
    }
};

style.css

.container {
    width: 200px;
    height: 100px;
    margin: auto;
    border: 1px solid;
    display: flex;
    background-color: bisque;
}

main.js

var React = require('react');//引入react
var ReactDOM = require('react-dom');//引入react-dom
var styleCss = require('../style.css')
console.log("12345")
console.log(styleCss.container)
class Index extends React.Component{
    render(){
        return(
            <div>
                <h1 className={styleCss.container}>hello world</h1>
            </div>

        )
    }
}
ReactDOM.render(
    <Index/>,
    document.getElementById('example')
)

package.json

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.9",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "antd": "^3.1.6",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }

webpack运行

无法打印出css

className也加载不上

目录结构如下

求教！谢谢！

Answer 1

需要配置modules为true吧