webpackでscssを読み込めませんでした

Question

私はwebpackを使用しています。JavaScriptにscssファイルをロードします。 （もしそれが別々のものであれば、それもよい）。

これは私のWebPACKの設定です：

"use strict"; 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const path = require('path'); 

module.exports = { 
    context: __dirname + '/src', 
    entry: './js/index.js', 
    output: { 
     path: './build', 
     filename: 'js/app.bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ["style", "css", "sass"] 
      } 
     ] 
    }, 
    resolve: { 
     root: [ 
      path.resolve('./src/js'), 
      path.resolve('./src/scss') 
     ], 
     extensions: ['', '.js'] 
    }, 
    plugins: [ 
     new CopyWebpackPlugin([ 
      { from: 'html/**', to: `${__dirname}/build/html`, flatten: true }, 
      { from: 'images/**', to: `${__dirname}/build/image`, flatten: true } 
     ]) 
    ] 
}; 

これは私のファイルのリストである：

• のsrc/HTML/index.htmlを - >ビルド/ HTML/index.htmlを（勤務）
• のsrc /画像/ ** - >ビルド/画像/ **（働いていた）
• のsrc/JS/index.js - > /のJS/app.bundle.jsを構築（働いた）
• のsrc/SCSS/* * - > build/css/** （未使用）

これはJavaScriptコードです。私はこのプロジェクトを始めたので、あまりコード：

import "babel-polyfill"; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import moduleA from 'moduleA'; 
import "view/startup.scss"; 

ReactDOM.render(
    <div> 
     <h1>Helloworld!</h1> 
    </div>, 
    document.getElementById('entry') 
); 

あなたはこの見ることができます：輸入「ビュー/ startup.scssを」。 私は私はJavaScriptにSCSSファイルをロードしたいのですが、私はWebPACKのコマンドを実行すると、それは言う：ローダー/Users/.../Desktop/work/my-project/app/node_modules/で

ERROR CSS/index.jsは4 ./scss/view/startup.scss @機能 を返しませんでした：WebPACKのコンフィグレーションの「決意」プロパティに14から123

、私は別のルートを追加したことがわかりますまた、sass-loaderもロードしましたが、動作しません。理由はわかりません。

私が知っているように、css/scssを含むWebpackは自動的に宛先ファイルに挿入されるので、別のファイルとして抽出する必要はありません。

./scss/view/startup.scss

#startup { 
    background-color: #7087d7; 
} 

Answer 1

のすべてのヘルプは非常に理解されるであろう:)

を*更新* コード私が強調した理由（へのエラーポイント関連部分）：

ローダー/Users/.../Desktop/work/my-project/app/node_modules/でERROR CSS/index.jsが機能する@ ./scss/view/startup.scss 4返されませんでした：あなたはWebPACKのでローダーを宣言するときに、あなたが-loaderサフィックスをオフに残すことができ、14から123

を（そうcss-loaderはcssになります）接尾辞なしのローダー名と一致する可能性のある他のモジュールはありません。

cssパッケージを使用しているため、これは失敗します.Webpackはローダーとして使用しようとします（そうでないと失敗します）。この問題を解決するには

、フルローダパッケージ名を使用します。

loaders : [ "style-loader", "css-loader", "sass-loader" ]