isomorphic-style-loaderがCSS構文エラーを投げるのを防ぐ方法

webpack 'isomorphic-style-loader'を使用して、CSSコンポーネントを反応コンポーネントから正しく解析することができません。すべてはWebPACKの微細な動作しますが、私はロードしようとすると、私は次のエラーを取得コンポーネントをサーバに反応する：isomorphic-style-loaderがCSS構文エラーを投げるのを防ぐ方法

> SyntaxError: /Users/username/projects/company/react- storefront/assets/js/views/components/`enter code  here`PrimaryHeader/PrimaryHeader.css: Unexpected token (1:0) 
.root { 
    padding-top: 27px; 
    position: relative; 
}

私のWebPACKの設定が次のとおりです。次のように

var webpack = require('webpack'); 
var path = require('path'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var SailsAssetCopier = require('../webpackPlugins/SailsAssetCopier'); 

const AUTOPREFIXER_BROWSERS = [ 
    'Android 2.3', 
    'Android >= 4', 
    'Chrome >= 35', 
    'Firefox >= 31', 
    'Explorer >= 9', 
    'iOS >= 7', 
    'Opera >= 12', 
    'Safari >= 7.1', 
]; 
module.exports.webpack = { 
options: { 
    devtool: ['source-map'], 
    entry: [ 
     './assets/js/app.js', 
    ], 
    output: { 
     path: path.resolve(__dirname, '../.tmp/public/js'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
     // requires "npm install --save-dev babel-loader" 
      { 
       test: /\.jsx?$/, 
       loader: 'babel-loader', 
       include: [ 
        path.resolve(__dirname, '../assets'), 
       ], 
       query: { 
        // https://github.com/babel/babel-loader#options 
        cacheDirectory: false, 

        // https://babeljs.io/docs/usage/options/ 
        babelrc: false, 
        presets: [ 
         'react', 
         'es2015', 
         'stage-0', 
        ], 
        plugins: [ 
         'transform-runtime', 
         [ 
          'transform-react-remove-prop-types', 
          'transform-react-constant-elements', 
          'transform-react-inline-elements', 
         ], 
        ], 
       }, 
      }, 
      { 
       test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)? $/, 
       loader: 'url?limit=100000&name=[name].[ext]' 
      }, 
      { 
       test: /\.css$/, 
       loaders: [ 
        'isomorphic-style-loader', 
        `css-loader?${JSON.stringify({ 
         sourceMap: true, 
         // CSS Modules https://github.com/css-modules/css-modules 
         modules: true, 
         localIdentName: '[name]_[local]_[hash:base64:3]', 
         // CSS Nano http://cssnano.co/options/ 
         minimize: false, 
        })}` 
       ] 

      } 

     ] 
    }, 
    plugins: [ 
     //new ExtractTextPlugin("../styles/main.css"), 
     new SailsAssetCopier({ 
      excludes:['.DS_Store','js','styles'] 
     }) 
    ] 
}, 
// docs: https://webpack.github.io/docs/node.js-api.html#compiler 
watchOptions: { 
    aggregateTimeout: 300 
}};

は、コンポーネントを反応させ、私に（現在はちょうどそれが解析する取得しようと、どこでもCSSをレンダリングしようとしていない！）

import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './PrimaryHeader.css'; 

const React = require('react'); 
const Router = require('react-router'); 
const Link = Router.Link; 
const ReactRedux = require("react-redux"); 
const isServer = !process.browser; 
const PrimaryHeader = React.createClass({ 

    /** 
    * - render method 
    * 
    * 
    * 
    */ 
    render: function(){ 

     return (
      <header className="primary-header js-require"> 
       <p>some content</p> 

      </header> 
     ); 
    } 
}); 
// connect to Redux store 

var mapStateToProps = function(state){ 

    return { 
     user: state.user 
    }; 
}; 

module.exports = isServer ? withStyles(s)(PrimaryHeader) :   ReactRedux.connect(mapStateToProps)(PrimaryHeader);

出典

2016-10-22 user1517041

こちらをご覧ください：http://stackoverflow.com/questions/38111259/how-do-you-use-withstyles-isomorphic- style-loader-when-your-classname-have-a-da –