Reactjs Webpack設定の問題

Question

私はしばらくの間、reactjsプロジェクトに取り組んできました。私はプロジェクトで第三者図書館を使うことに決めました。

ライブラリをインストールしてインポートしました。このライブラリにnode_modulesからアクセスできます。

しかし、私はこのライブラリが自分のcssとscssファイルにアクセスできないので、私はwebpackの設定がこれの背後にあると判断しました。だから私はここに私のwebpack congirationファイルをポストしています。サードパーティのモジュールが自分のCSSとSCSSファイルにアクセスすることができます - どのようnode_modulesは、srcディレクトリ

ではありません。という

  var path = require("path"); 

      var DIST_DIR = path.resolve(__dirname, "dist"); 
      var SRC_DIR = path.resolve(__dirname, "src"); 

      var config = { 
       entry: SRC_DIR + "/app/index.js", 
       output: { 
        path: DIST_DIR + "/app", 
        filename: "bundle.js", 
        publicPath: "/app/" 
       }, 
       module: { 
        loaders: [ 
         { 
          test: /\.js?/, 
          include: [SRC_DIR], 
          loader: "babel-loader", 
          query: { 
           presets: ["react", "es2015", "stage-2"] 
          } 
         }, 
         { 
          test: /\.s?css$/, 
          include: [SRC_DIR], 

/*  as far as I know directories in here will be searched- 
     for scss and css files and these files will be loaded. 
     I'm not sure if I need to import node modules or add it's path here. 
     Also using sass it throws "unexpected format" from my css files in src path.*/ 
          loaders: ['style', 'css' , 'sass'] 
         } 
        ] 
       } 
      }; 

      module.exports = config; 

注意？ - この設定を変更する必要はありますか？

Answer 1

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/app.js", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "app.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
};