이상한 클래스 네임으로 CSS를 컴파일하는 웹팩

NodeJS 백엔드가있는 React 앱을 개발하는 동안 현재 webpack을 사용하고 있습니다.이상한 클래스 네임으로 CSS를 컴파일하는 웹팩

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> 사업부로 변환된다 : 내 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 클래스 이름을 적절하게 변경하려면 어떻게해야합니까? 내 웹팩 설정에서이를 분리 한 경우

는 :

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

라인 그것은 CSS 파일을 찾을 수 있다고하지만 경로가 유효에 오류를 밖으로. 좋은 측정을위한

웹팩 설정 :

이

'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]' 
    }] 
    } 
};

출처

2016-07-20 Nick

워크 플로우에서'css-modules'을 버리는 것이 아니라 CSS의 미래를 준비하는 것이 좋습니다. – Everettss

귀하의 설정이 현재 css-modules를 사용합니다. 이를 비활성화하려면 css 파일의 로더에서 변경 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'에서 'style!css'으로 변경하십시오.

출처

2016-07-20 16:10:27 Igorsvee

이상한 클래스 네임으로 CSS를 컴파일하는 웹팩

답변

관련 문제