javascript - 冲突的服务器/客户端渲染和 Webpack 的本地 css 模块

Question

我正在使用 Fluxible 帮助在新项目上创建一个同构应用程序，并且进展顺利。到目前为止我喜欢它。不过，我遇到了减速带，想知道如何克服它。

到目前为止，这是我的 Header 组件:

import React from 'react'
import Nav from '../Nav/Nav'

import classNames from 'classnames'
if (process.env.BROWSER) var styles = require('./Header.css')

class Header extends React.Component {
    render() {

        // Header classes
        var theClasses = process.env.BROWSER ? classNames({
            [styles.Header]: true
        }) : ''

        return (
            <header className={theClasses}>
                <Nav selected={this.props.selected} links={this.props.links} />
            </header>
        )
    }
}

export default Header

你会看到我正在使用 process.env.BROWSER检测我在哪个环境中。如果我们在客户端，我需要 CSS。如果我们在服务器上，我会跳过它。效果非常好。

问题出现在我构建 theClasses 的文件中基于 Header.css 内容的对象文件，然后像这样在 Header 上使用这些类:

<header className={theClasses}>
    <Nav selected={this.props.selected} links={this.props.links} />
</header>

问题是因为我没有在服务器上加载 css，theClasses最终为空，为客户端呈现的内容最终与服务器上的内容不同。 React 显示此警告:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

(client) n28"><header class="Header--Header_ip_OK

(server) n28"><header class="" data-reactid=".2ei

您会推荐什么来解决这个问题？

---

2015 年 9 月 24 日更新

最初的问题是我无法在服务器端编译 CSS，所以我开始像这样检查 BROWSER:

if (process.env.BROWSER) var styles = require('./Application.css')

如果我删除 if (process.env.BROWSER)我得到这个错误:

SyntaxError: src/components/Application/Application.css: Unexpected token (2:0)
  1 |
> 2 | @import 'styles/index.css';
    | ^
  3 |

在下面的简单 CSS 文件中:

@import 'styles/index.css';

.Application {
    box-shadow: 0 0 0 1px var(--medium-gray);
    box-sizing: border-box;
    lost-center: 1080px 32px;
}

我用 Fluxible Yo Generator 开始了这个项目它在这里提供了两个 Webpack 配置文件:https://github.com/yahoo/generator-fluxible/tree/master/app/templates

我用一些装载机更新了我的:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './client.js'
    ],
    output: {
        path: path.resolve('./build/js'),
        publicPath: '/public/js/',
        filename: 'main.js'
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loaders: [
                    require.resolve('react-hot-loader'),
                    require.resolve('babel-loader')
                ]
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]_[hash:base64:5]!postcss-loader'
            }, {
                test: /\.(png|jpg|svg)$/,
                loader: 'url?limit=25000'
            }, {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    },
    postcss: function () {
        return [
            require('lost'),
            require('postcss-import')({
                path: ['./src/'],
                onImport: function (files) {
                    files.forEach(this.addDependency);
                }.bind(this)
            }),
            require('postcss-mixins'),
            require('postcss-custom-properties'),
            require('autoprefixer')({
                browsers: ['last 3 versions']
            })
        ];
    },
    node: {
        setImmediate: false
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
                BROWSER: JSON.stringify(true)
            }
        })
    ],
    devtool: 'eval'
};

这就是我的处境……不确定如何在服务器端编译 CSS。感谢我能得到的任何帮助。

Answer 1

你可以试试css-modules-require-hook

webpack.config.js

{
  test: /\.css$/,
  loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]'
}

server.js

require('css-modules-require-hook')({
  // This path should match the localIdentName in your webpack css-loader config.
  generateScopedName: '[name]__[local]___[hash:base64:5]'
})