현재 웹 패키지 응용 프로그램을 사용하여 저음역을 사용하려고합니다. 구성 성공에 성공했습니다 style-loader
& css-loader
. 나는 시도하고 sass-loader
을 구현할 때 그러나, 나는 다음과 같은 오류가 나타날 수sass-loader webpack을 구현하는 중 오류가 발생했습니다.
bundle.js:598 Uncaught Error: Cannot find module "!!./../../css-loader/index.js!./../../sass-loader/index.js!./index.js?http:/localhost:8000"
은 제가 style-loader
& css-loader
을 설치 한 방법의 단계를 보자.
- 는 webpack.config하는
npm install style-loader css-loader --save-dev
추가 로더를 실행 :
module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'react-hot!babel' }, { test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader", } ] }
만든 CSS 폴더를 거기
myStyle.css
- 가져온 스타일 시트로의 구성 요소
require(../../css/myStyle.css
이것은 효과가 있었고 어떤 문제도 없었습니다. 이 후 나는 sass-loader
을 추가하려고 시도했다. 내가 취한 단계는 첫 번째 단계와 매우 유사했습니다.
- 는
myStyle.scss
에module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'react-hot!babel' }, { test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader", }, { text: /\.scss$/, exlude: /node_modules/, loader: "style-loader!css-loader!sass-loader" } ] }
변경
myStyle.css
을 webpack.config하는npm install sass-loader node-sass --save-dev
추가 로더를 달렸다. 에
- 가져온 스타일은 내가 DOM에서 위에 붙여 오류가 나타납니다 이후 구성 요소를
require('../../myStyle.scss')
반응. 여기에 콘솔 barfs 나와 오류 :
[1] (webpack)-dev-server/client?http://localhost:8000 1.01 kB {0} [built] [1 error]
[3] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
[4] (webpack)/hot/only-dev-server.js 981 bytes {0} [built] [1 error]
[6] ./src/index.jsx 2.42 kB {0} [built] [1 error]
[7] (webpack)/buildin/module.js 954 bytes {0} [built] [1 error]
[9] ./~/react-hot-loader/~/react-hot-api/modules/index.js 993 bytes {0} [built] [1 error]
[11] ./~/react-hot-loader/RootInstanceProvider.js 975 bytes {0} [built] [1 error]
[13] ./~/react/lib/ReactMount.js 966 bytes {0} [built] [1 error]
[15] ./~/react/react.js 930 bytes {0} [built] [1 error]
[18] ./~/react-hot-loader/makeExportsHot.js 957 bytes {0} [built] [1 error]
ERROR in ./~/css-loader!./~/sass-loader!./src/index.jsx
Module build failed:
import React from 'react';
^
Invalid CSS after "i": expected 1 selector or at-rule, was "import React from '"
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/src/index.jsx (line 1, column 1)
@ ./src/index.jsx 8:14-115 17:2-21:4 18:20-121
ERROR in ./~/css-loader!./~/sass-loader!(webpack)-dev-server/client? http:/localhost:8000
Module build failed:
var url = require('url');
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var url = require('"
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/webpack-dev-server/client/index.js (line 1, column 1)
@ (webpack)-dev-server/client?http://localhost:8000 4:14-115 13:2-17:4 14:20-121
ERROR in ./~/css-loader!./~/sass-loader!(webpack)/hot/only-dev-server.js
Module build failed:
var lastData;
^
Property "var" must be followed by a ':'
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/webpack/hot/only-dev-server.js (line 7, column 2)
@ (webpack)/hot/only-dev-server.js 4:14-104 13:2-17:4 14:20-110
ERROR in ./~/css-loader!./~/sass-loader!./~/react-hot- loader/RootInstanceProvider.js
Module build failed:
'use strict';
^
Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react-hot-loader/RootInstanceProvider.js (line 1, column 1)
@ ./~/react-hot-loader/RootInstanceProvider.js 4:14-103 13:2-17:4 14:20-109
ERROR in ./~/css-loader!./~/sass-loader!(webpack)/buildin/module.js
Module build failed:
module.exports = function(module) {
^
Invalid CSS after "module.exports": expected "{", was "= function(module) "
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/webpack/buildin/module.js (line 1, column 15)
@ (webpack)/buildin/module.js 4:14-95 13:2-17:4 14:20-101
ERROR in ./~/css-loader!./~/sass-loader!./~/react-hot-loader/makeExportsHot.js
Module build failed:
'use strict';
^
Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react-hot-loader/makeExportsHot.js (line 1, column 1)
@ ./~/react-hot-loader/makeExportsHot.js 4:14-97 13:2-17:4 14:20-103
ERROR in ./~/css-loader!./~/sass-loader!./~/react/lib/ReactMount.js
Module build failed:
*/
^
Invalid CSS after " */": expected 1 selector or at-rule, was "'use strict';"
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react/lib/ReactMount.js (line 10, column 4)
@ ./~/react/lib/ReactMount.js 4:14-99 13:2-17:4 14:20-105
ERROR in ./~/css-loader!./~/sass-loader!./~/react-hot-loader/~/react-hot-api/modules/index.js
Module build failed:
'use strict';
^
Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react-hot-loader/node_modules/react-hot-api/modules/index.js (line 1, column 1)
@ ./~/react-hot-loader/~/react-hot-api/modules/index.js 4:14-106 13:2-17:4 14:20-112
ERROR in ./~/css-loader!./~/sass-loader!./~/react/react.js
Module build failed:
'use strict';
^
Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react/react.js (line 1, column 1)
@ ./~/react/react.js 4:14-88 13:2-17:4 14:20-94
webpack: bundle is now VALID.
모든 제안이나 도움을 주시면 감사하겠습니다. 지금 나는 잠에서 벗어나 내일 아침에 다시 점검 할 것이다. 모든 사람에게 즐거운 밤을 보내고 즐거운 밤을 보내십시오!