isomorphic-style-loader가 CSS 구문 오류를 throw하는 것을 방지하는 방법

반응 구성 요소에서 내 CSS 모듈을 올바르게 구문 분석하기 위해 webpack 'isomorphic-style-loader'를 가져 오는 데 문제가 있습니다. 모든 웹팩와 잘 실행,하지만 난로드하려고 할 때 나는 다음과 같은 오류 얻을 서버에 구성 요소를 반응 :isomorphic-style-loader가 CSS 구문 오류를 throw하는 것을 방지하는 방법

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

내 웹팩 설정은 다음과 같다 : 다음과 같이

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- 스타일 로더 -class-your-classname-has-a-da –