React: Как отключить вставку стилей в страницу?

Question

[Archakov Dennis]

При создании бандла для продакшна, произвожу сжатие и деление стилей и скриптов. Основной файл со стилями сохраняю отдельно, как app.css. Но, при подключении бандла, реакт внедряет эти же стили в саму страницу. В итоге, получается, что я подключаю два раза одни и те же стили. Через app.css и через сам бандл.

webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: '#source-map',
  entry: './src/index',
  output: {
    path: path.join(__dirname, 'interface/static/js'),
    filename: 'app.js',
    publicPath: '/interface/static'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.(styl|css)$/,
        loader: 'style-loader!css-loader!stylus-loader'
      },
      {
        test: /\.(jpe|jpg|png|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('../css/app.css')
  ]
};

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = [
    new ExtractTextPlugin("../css/app.css"),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: {
        screw_ie8: true,
        keep_fnames: true
      },
      compress: {
        screw_ie8: true
      },
      comments: false
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ];
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router'

import App from './container/App';

import LoginBlock from './layouts/LoginBlock';
import ResetBlock from './layouts/ResetBlock';
import RegisterBlock from './layouts/RegisterBlock';
import ThanksBlock from './layouts/ThanksBlock';

import './styles/app.styl';

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={LoginBlock} />
      <Route path='reset' component={ResetBlock} />
      <Route path='register' component={RegisterBlock} />
      <Route path='thanks' component={ThanksBlock} />
    </Route>
  </Router>
, document.getElementById('root'));

Answer 1

[Никита Гущин]

Этим занимается style-loader и его можно конфигурировать - https://github.com/webpack-contrib/style-loader#url