2

我无法让 webpack 'isomorphic-style-loader' 从反应组件中正确解析我的 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
}};

我的反应组件如下（目前不尝试在任何地方渲染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);
4

1 回答 1

1

JSX 中花括号之间的代码只是 JavaScript，而 s 只是一个对象。即，您可以像在 JS 中一样访问 s 的属性，即使它们包含破折号、空格或其他有趣的字符。

具体来说，你可以写：

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

资料来源：当您的 className 中有破折号时，您如何使用 withStyles（同构样式加载器）？

于 2017-01-19T19:43:25.450 回答