我有一个应用程序,其文件夹的结构如下:
/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')
)
我已经尝试了所有方法来加载它,在资产字之前添加 ../ 以及所有内容,但我只是在控制台上不断收到此错误:
Error: Cannot find module "assets/css/myapp.css"
我有仔细检查,并且css-loader
都style-loader
在/node_modules
文件夹中。
我究竟做错了什么?我坚持了3个多小时,检查了几十个教程,我已经完成了所有指定的操作。谢谢您的帮助!