如何防止同构样式加载器抛出css语法错误

Question

我在让webpack‘同构样式加载器’从react组件中正确解析我的css模块时遇到了问题。使用webpack一切运行正常，但是当我试图在服务器上加载react组件时，我得到了以下错误：

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

我的react组件如下所示(当前并未尝试在任何地方呈现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只是一个对象。也就是说，您可以像在JS中一样访问s的属性，即使它们包含破折号、空格或其他有趣的字符。

具体地说，您可以这样写：

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

来源：How do you use withStyles (isomorphic style loader) when your className has a dash in it?