einschließlich node_modules CSS-Dateien funktioniert nicht in Webpack Produktion

Question

Mein Code einige CSS aus node_modules enthält wie so

import React, { PropTypes } from 'react'; 
import Slider from 'rc-slider'; 
import 'rc-slider/assets/index.css'; 
import styles from '../css/SeekBar.css'; 

ich den Import der CSS-Datei rc-slider/assets/index.css vom node_module rc-slider. Dies funktioniert in der Entwicklung mit meinem Webpack Config

{ 
    test: /\.css$/, 
    use: ['style-loader', 'css-loader'], 
    include: [path.join(__dirname, '..', 'node_modules')], 
    }, 

jedoch in meiner Produktion config nicht

{ 
    test: /\.css$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
     { 
      loader: 'css-loader', 
      options: { 
      module: true, 
      localIdentName: '[path][name]__[local]___[hash:base64:5]', 
      }, 
     }, 
     { 
      loader: 'postcss-loader', 
      options: { plugins: postCSSConfig }, 
     }, 
     ], 
    }), 
    }, 
    { 
    test: /\.css$/, 
    use: ['style-loader', 'css-loader'], 
    include: [path.join(__dirname, '..', 'node_modules')], 
    }, 

Der Fehler ist unter

Child extract-text-webpack-plugin: 
      [0] ../~/css-loader?{"module":true,"localIdentName":"[path][name]__[local]___[hash:base64:5]"}!../~/postcss-loader?{}!../~/style-loader!../~/css-loader!../~/rc-slider/assets/index.css 988 bytes {0} [built] [failed] [1 error] 

     ERROR in ../~/css-loader?{"module":true,"localIdentName":"[path][name]__[local]___[hash:base64:5]"}!../~/postcss-loader?{}!../~/style-loader!../~/css-loader!../~/rc-slider/assets/index.css 
     Module build failed: Unknown word (5:1) 

      3 | // load the styles 
      4 | var content = require("!!./../../css-loader/index.js!./index.css"); 
     > 5 | if(typeof content === 'string') content = [[module.id, content, '']]; 
      |^
      6 | // add the styles to the DOM 
      7 | var update = require("!./../../style-loader/addStyles.js")(content, {}); 

Wenn ich

{ 
    test: /\.css$/, 
    use: ['style-loader', 'css-loader'], 
    include: [path.join(__dirname, '..', 'node_modules')], 
    }, 

entfernen funktioniert

von In der Webpack-Produktionskonfiguration gibt es keine Fehler, aber die Stile werden nicht von rc-slider/assets/index.css übernommen.

Answer 1

indem Gelöst

{ 
    test: /\.css$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
     { 
      loader: 'css-loader', 
      options: { 
      modules: true, 
      localIdentName: '[path][name]__[local]___[hash:base64:5]', 
      }, 
     }, 
     { 
      loader: 'postcss-loader', 
      options: { plugins: postCSSConfig }, 
     }, 
     ], 
    }), 
    include: [path.join(__dirname, '..', 'app')], 
    exclude: [path.join(__dirname, '..', 'node_modules')], 
    }, 
    { 
    test: /\.css$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: ['css-loader'], 
    }), 
    include: [path.join(__dirname, '..', 'node_modules')], 
    exclude: [path.join(__dirname, '..', 'app')], 
    },