Webpack bundle返回'找不到模块'用于CSS

时间:2016-06-04 23:15:20

标签: node.js reactjs webpack webpack-style-loader css-loader

我有一个应用程序,其文件夹的结构如下:

 /app/
    |- /assets/
    |   |- /css/
    |       |- myapp.css
    |- index.html
    |- index.js
 /dist/
 /node_modules/
 .babelrc
 package.json
 webpack.config.js

myapp.css是一个简单,简单的CSS,没什么特别的。只需在body上设置一个样式,看看它是否正常工作。 我的webpack.config.js文件包含:

// In webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
      {test: /\.css$/, loaders: ['style', 'css']}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

我已将所需的css文件放在index.js上,如下所示:

var React = require('react');
var ReactDOM = require('react-dom');

require('assets/css/myapp.css');

var HelloWorld = React.createClass({
    render: function () {
        return (
            <div> Hello ReactJs</div>
        )
    }
});

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('app')
)

我已经尝试了所有方法来加载它,在资源字和everythig之前添加../但我只是在控制台上继续收到此错误: Error: Cannot find module "assets/css/myapp.css"

我进行了仔细检查,css-loaderstyle-loader都在/node_modules文件夹中。

我做错了什么?我被困在它上面超过3个小时,检查了几十个教程,我已完成所有指定。谢谢你的帮助!

1 个答案:

答案 0 :(得分:2)

嗯......我只需要将./添加到require行,如下所示:

require('./assets/css/myapp.css');

希望这有助于其他人。谢谢,@ QoP