sass-loader webpackの実装中にエラーが発生しました

Question

現在、私のwebpackアプリケーションでうまく動作しようとしています。私は設定で成功しましたstyle-loader & css-loaderしかし、私は試してみてsass-loaderを実装したときに、私は次のエラーが表示されます

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をインストールする方法の手順を紹介してみましょう。

1. はwebpack.configするnpm install style-loader css-loader --save-dev

2. 追加されたローダー蘭：

   module: { 
       loaders: [ 
       { 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'react-hot!babel' 
       }, 
       { 
        test: /\.css$/, 
        exclude: /node_modules/, 
        loader: "style-loader!css-loader", 
       } 
       ] 
   } 
   

3. はCSSのフォルダを作成し、中に存在myStyle.css

4. インポートスタイルシート内に配置する成分require(../../css/myStyle.css

を反応させます10

これはうまくいきましたが、問題はありませんでした。この後、私はsass-loaderを追加しようとしました。私が取った手順は、最初の手順と非常に似ていました。

1. は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" 
       } 
       ] 
   } 
   

2. 変更myStyle.cssをwebpack.configするnpm install sass-loader node-sass --save-dev

3. 追加ローダーを実行しました。スタイルシートをインポート

4. 私は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. 

私は何か提案や助けをいただければ幸いです。今のところ私は寝ていて、明日の朝に戻ってきます。すべての良い夜にすべての良いコーディングにハッピーコーディング！

Answer 1

それはあなたがJSXファイルをロードしようとしているようだ（./~/css-loader!./~/sass-loaderに！./src/index.jsx）の代わりのCSS/SCSS/SASSファイル。