React/webpackプロジェクトでは、どのようにしてsassを使用できますか？

Question

私はこの

import sass from '../scss/application.scss'; 

Is this the wrong type of import above?

今のは私に次のエラーを与えて...

ERROR in ./app/components/Landing.js Module not found: Error: Can't resolve 'style' in '/Users/sam/Desktop/talkingwith/talkingwith' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'style-loader' instead of 'style'. @ ./app/components/Landing.js 13:19-54 @ ./app/App.js @ multi (webpack)-dev-server/client? http://localhost:3333 ./app/App.js

ない私は今、私のコンポーネントでSASSを使用する方法を確認して、それをインポートして、前に働いていました。

編集：私のWebPACKファイル

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var path = require('path'); 


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './app/App.js' 
    ], 
    output: { 
    path: __dirname + '/public', 
    filename: "bundle.js" 
    }, 
    plugins: [HTMLWebpackPluginConfig], 
    devServer: { 
     inline:true, 
     contentBase: './public', 
     port: 3333 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
     }, 
     { 
       test: /\.scss$/, 
       loader: 'style!css!sass' 
      }] 
    } 
}; 

Answer 1

をApp.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var path = require('path'); 


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './app/App.js' 
    ], 
    output: { 
    path: __dirname + '/public', 
    filename: "bundle.js" 
    }, 
    plugins: [HTMLWebpackPluginConfig], 
    devServer: { 
    inline:true, 
    contentBase: './public', 
    port: 3333 
    }, 
    module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
    }, 
    { 
     test: /\.scss$/, 
     loaders: ["style-loader", "css-loader", "sass-loader"] 
    } 
    ] 
    } 
}; 

あなたはすべてを行う必要以上にあなたのwebpack.config.jsを更新した後は、お使いのエントリポイントのjsファイル内の.scssファイルが必要です私が使用して解決策を投稿すると思った

{ 
    test: /\.scss$/, 
    loader: 'style-loader!css-loader!sass-loader' 
    } 

Answer 2

@import '../scss/application'; 

を試してみて、WebPACKの設定ファイル、

{ 
    test: /\.scss$/, 
    loaders: [ 
     'style', 
     'css', 
     'sass' 
    ] 
} 

Answer 3

に私はあなたが使用しているSASSどのようなライブラリは100％を確認していません。本当にうまくいくのは、sass-loaderと一緒にnode-sassライブラリを使用することです。 https://github.com/jtangelder/sass-loader また、css-loaderとstyle-loaderでsass-loaderを使用することをお勧めします。 （私の例のように）

あなたのwebpack.config.jsは次のようになります。あなたのケースで

require('path/to/your/style.scss');