Как предотвратить загрузку isomorphic-style-loader от синтаксической ошибки css

Question

У меня возникли проблемы с получением веб-пакета "isomorphic-style-loader" для правильного анализа моего модуля css из компонента реагирования. Все работает нормально с Webpack, но когда я пытаюсь загрузить компонент реагирования на сервер, я получаю следующую ошибку:

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

Answer 1

Код между фигурными скобками в JSX - это просто JavaScript, а s - это просто объект. то есть вы можете получить доступ к свойствам s так же, как вы это обычно делаете в JS, даже если они содержат тире, пробелы или другие забавные символы.

В частности, вы можете написать:

<div className={s['some-class']}></div>

Source: Как вы используете withStyles (загрузчик изоморфного стиля), когда в вашем className есть тире?