2017-02-17 4 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 구성에서 해결 확장을 사용하지 않고 같은 문제가 발생합니다.

+0

에 저장했는지 확인합니다 '' – finalfreq

+0

이제는 올바른 방향으로 나아가는 css-loader를 해결하는 것에 대해 불평하고 있습니다. 감사! @finalfreq 나는 생각했다. 응용 프로그램의 루트를 의미합니다. webpack.config.js에 정의 된 내 진입 점의 루트를 의미합니까? – jonofan

+0

./은 현재 작업 디렉토리를 의미하므로,이 경우에는'app'가됩니다. – finalfreq

답변

1

어떻게 구성했는지에 따라 올바른 파일 경로를 가리키고 있지 않습니다.

사용 import style from './styles/main.scss' 대신

또한 NPM을 통해 css-loadersass-loaderstyle-loader를 설치하고`수입 스타일을 할 경우 './styles/main.scss에서 발생하는 귀하의 package.json

+0

올바른데, 나는 css-loader를 설치하는 것을 잊었습니다. 이제 className = 'person'을 사용하여 내 scss를 참조 할 수 있습니다. style = {styles.person}도 작동해야합니까? (나는 몇 가지 이름을 바꾸었다.) 렌더링 된 html에 클래스를 추가하는 것처럼 보이지 않는다. – jonofan