2017-02-17 8 views
0

私のリアクションアプリケーションをビルドしようとすると、エラーが発生します。インポートを使用して.jsxの.scssファイルを解決できません

webpack-dev-server --progress --inline --watch

ERROR in ./app/index.jsx 
Module not found: Error: Can't resolve 'styles/main' in '/Users/jono/dev/recipist/app' 
@ ./app/index.jsx 11:12-34 
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.jsx 

私はimport style from 'styles/main';

これは私のツリーは次のようになります使用してindex.jsxにインポートしています:私が持っているhttps://github.com/jonofan/recipist/blob/master/webpack.config.js

. 
├── app 
│   ├── index.jsx 
│   └── styles 
│    └── main.scss 
├── index.html 
├── output 
│   └── bundle.js 
├── package.json 
└── webpack.config.js 

webpack.config.jsまた、完全な拡張子wを参照しようとしましたconfig内のresolve拡張を使用せずに、同じ問題が発生します。

+0

に保存されているを確認します./styles/main.scss '' – finalfreq

+0

正しい方向に進んでいると思われるcss-loaderの解決について不平を言っています。ありがとう! @finalfreq私は思った。アプリケーションのルートを意味します。 webpack.config.jsで定義されているエントリポイントのルートを意味しますか? – jonofan

+0

./は現在の作業ディレクトリを意味するので、その場合は 'app'となります – finalfreq

答えて

1

どのように設定したら、正しいファイルパスを指していません。

代わりに使用import style from './styles/main.scss'

も、あなたが「から `インポートスタイルをすれば何が起こるか、NPMを通じてcss-loadersass-loaderstyle-loaderをインストールし、package.json

+0

正しいですが、私はcss-loaderをインストールするのを忘れていました。 className = 'person'を使って自分のscssを参照できるようになりました。 style = {styles.person}も使えますか? (私はいくつかの名前を変更しました)。レンダリングされたhtmlにクラスを追加するようには見えません。 – jonofan

関連する問題