Webpack компилирует CSS в странные classnames

Question

В настоящее время я использую webpack при разработке приложения React с бэкэндом NodeJS.

У меня возникли проблемы с стилем приложения, потому что кажется, что webpack пытается что-то сделать с моим css, где он заканчивает изменение классов.

Например, в моем base.css файле у меня есть это:

body { 
    background: #ECEFF1; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    line-height: 1.7; 
    margin: 0 auto; 
    padding: 30px; 
    max-width: 980px; 
} 

.progress { 
    background-color: #FFECB3; 
} 
.progress .indeterminate { 
    background-color: #FFC107; 
} 

Который, когда я загрузить страницу и посмотреть в голове превращается в <style> DIV с этими названиями класса:

<style type="text/css"> 
body { 
    background: #ECEFF1; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    line-height: 1.7; 
    margin: 0 auto; 
    padding: 30px; 
    max-width: 980px; 
} 

.base---progress---1RR8Z { 
    background-color: #FFECB3; 
} 
.base---progress---1RR8Z .base---indeterminate---23sZH { 
    background-color: #FFC107; 
} 

Так стили прогресса не попадают на страницу, потому что они изменены в этот формат. Как я могу избежать этого или изменить React имена классов соответствующим образом?

---

Если я удалил это из моего WebPack конфигурации:

{ 
     test: /\.css$/, 
     loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]' 
    } 

линии он говорит, что не может найти файл CSS, но путь, который он ошибки на действителен.

---

Webpack конфигурация для хорошей меры:

'use strict'; 

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

module.exports = { 
    devtool: 'eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client?reload=true', 
    path.join(__dirname, 'public/app/main.js') 
    ], 
    output: { 
    path: path.join(__dirname, '/dist/'), 
    filename: '[name].js', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'public/app/index.html', 
     inject: 'body', 
     filename: 'index.html' 
    }), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development') 
    }) 
    ], 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     "presets": ["react", "es2015", "stage-0", "react-hmre"] 
     } 
    }, { 
     test: /\.json?$/, 
     loader: 'json' 
    }, { 
     test: /\.css$/, 
     loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]' 
    }] 
    } 
}; 

Answer 1

Вашего конфиг в настоящее время использует css-modules. Чтобы отключить его изменение 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]' до 'style!css' в загрузчике для css файлов.