我有一个应用程序,其文件夹的结构如下:
/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-loader
和style-loader
都在/node_modules
文件夹中。
我做错了什么?我被困在它上面超过3个小时,检查了几十个教程,我已完成所有指定。谢谢你的帮助!
答案 0 :(得分:2)
嗯......我只需要将./
添加到require行,如下所示:
require('./assets/css/myapp.css');
希望这有助于其他人。谢谢,@ QoP