フォルダーが次のように構成されているアプリがあります。
/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 時間以上立ち往生しており、指定されたすべてを完了しました。助けてくれてありがとう!