модуль CSS не читается: Ошибка синтаксиса

Question

Вот компонент импорта CSS ...

import React from 'react'; 
import styles from './sample.css'; 

class Index extends React.Component { 

    render(){ 
     return (
      <div> 

       <div className="${styles.bodywrap}"></div> 

      </div> 

     ); 
    } 
} 

export default Index; 

Моя таблица стилей sample.css следующая ...

.bodywrap { 
    color:red; 
} 

Но когда я запускаю веб-приложение Я получаю следующую ошибку ...

SyntaxError: C:/Users/Eric/Desktop/tutorHub/components/index_components/sample.c 
ss: Unexpected token (1:0) 
> 1 | .bodywrap { 
    |^
    2 | color:red; 
    3 | } 

Я следил за установками для установки модулей css, поэтому мой webpack.config выглядит следующим образом:

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

module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: "./main.js", 
    output: { 
     path: '/', 
     filename: 'index.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel', 
       exclude: /node_modules/, 
       query:{ 
        presets: ['es2015','react'], 
       } 
      }, 
      { 
     test: /\.css/, 
     loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') 
     } 


     ] 
    }, 

    plugins: [ 
     new ExtractTextPlugin("styles.css"), 
     new webpack.optimize.OccurrenceOrderPlugin() 
    ] 
}; 

Любая идея, почему мой CSS не читается правильно? Мне нужно что-то, чтобы преобразовать код, чтобы он был распознан правильно?

EDIT

Я думаю, что его важно узел, который я оказывающего компонент выше через сервер, используя узел Js ...

var express = require('express'); 
var router = express.Router(); 
var React = require('react'); 
var reactDom = require('react-dom/server'); 
var App = React.createFactory(require('../components/index')); 
var MasterLayout = React.createFactory(require('../master/links')); 

router.get('/', function(req,res) { 
    var reactHtml = reactDom.renderToString(App({})); 
    var styles = reactDom.renderToString(MasterLayout({})); 
    res.render('../../tutorHub/index.jade', {reactOutput: reactHtml, links: styles}); 

}); 

Может ли это быть вмешательство в CSS?

Answer 1

В вашем webpack.config.js добавить этот загрузчик: -

{ 
    loaders: [ 
    { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
} 

Добавить в компоненте добавить: -

import 'yourPath.css'; 

для классов использования этого файла CSS просто написать

<div className="yourClassName" />