CSSをCSSを奇妙なクラス名にコンパイルする

Question

私は現在、webpackを使用していますが、NodeJSバックエンドを持つReactアプリケーションを開発しています。

私はcssで何かをしようとしているwebpackのように見えるので、アプリのスタイリングに問題があります。私はページをロードし、頭の中で見て

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要素に変換されます：私のbase.cssファイルで例えば

私は、これは持っているので、

<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を使用しています。これを無効にするには、cssファイルのローダーで変更〜'style!css'を変更します。