webpack/reactでsassを設定するにはどうすればよいですか？

Question

私は+反応のWebPACKにSASSを使用しようとしています、これは私のコンポーネントである：

'use strict'; 
import React from 'react'; 

require('style.scss'); 

class App extends React.Component { 
    render() { 
     return (
      <div className="hello-form"><p>this should be blue</p></div> 
     ); 
    } 

} 

export default App; 

これは私のコンフィグ設定である：私はWebPACKのを実行すると

loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: ['babel'], 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['style', 'css', 'sass'] 
      } 
     ] 

私はこのエラーを取得しています：

ERROR in ./App.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.scss in C:\Users\d815694\WebstormProjects\reactfrom_scratch 
@ ./App.js 24:0-24 

ウェブパックでサスを設定するにはどうすればよいですか？

Answer 1

私のソリューションは、package.json のスクリプトへの追加

"watch": "concurrently --names 'webpack, sass' --prefix name 'npm run start' 'npm run styles:watch'", 
"styles:watch": "sass -w src.scss:dest.css" 

はすべてそれを実行するために

create-react-app AppName 
cd AppName 
# RUN THIS 
npm install -D concurrently #Allows to run multiple cmd at the time 
npm install -D node-sass 

を実行した後、このようなものです助けてください

Answer 2

スタイルシートを直接指すようにエントリを設定します。

など。

entry: ['./assets/scripts/client.js', './assets/styles/client.css'] 

あなたはJSからそれを要求する必要はありません。ボーナスは、あなたがまだ何かのためにそれを使用している場合、それが麻薬を働かせるということです。

npm run watch 

がそれを願っています：