Reactjs 同构样式加载程序'；I don’’我没能按计划工作

嘿，我正在做这个简单的

react

+

SSR

项目，它集成了

同构样式加载器

。我按照这里详细介绍的分步指南来实现它，但它就是不起作用。我做的款式不好看。有谁能指导我解决这个问题吗

这是我的

网页配置

var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');

var browserConfig = {
    entry: './src/browser/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            {
                test: /\.css$/,
                use: [
                    'isomorphic-style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        },
                    },
                    'postcss-loader',
                ],
            },
        ],
    },
    mode: 'production',
    plugins: [
        new webpack.DefinePlugin({
            __isBrowser__: 'true',
        }),
    ],
};

var serverConfig = {
    entry: './src/server/index.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
        path: __dirname,
        filename: 'server.js',
        publicPath: '/',
    },
    mode: 'production',
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            {
                test: /\.css$/,
                use: [
                    'isomorphic-style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        },
                    },
                    'postcss-loader',
                ],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            __isBrowser__: 'false',
        }),
    ],
};

module.exports = [browserConfig, serverConfig];

这是我的

index.js（服务器）

下面是

App.js

中的一个组件，它使用了

css样式，但不起作用

import React from 'react';
import { NavLink } from 'react-router-dom';
import style from './css/style.css';
import withStyles from 'isomorphic-style-loader/withStyles';

function Navbar() {
    const languages = [
        {
            name: 'All',
            param: 'all',
        },
        {
            name: 'JavaScript',
            param: 'javascript',
        },
        {
            name: 'Ruby',
            param: 'ruby',
        },
        {
            name: 'Python',
            param: 'python',
        },
        {
            name: 'Java',
            param: 'java',
        },
    ];

    return (
        <ul className='navbar'>
            {languages.map(({ name, param }) => (
                <li key={param}>
                    <NavLink
                        activeStyle={{ fontWeight: 'bold' }}
                        to={`/popular/${param}`}
                    >
                        {name}
                    </NavLink>
                </li>
            ))}
        </ul>
    );
}

export default withStyles(style)(Navbar);

从“React”导入React；
从'react router dom'导入{NavLink}；
从“./css/style.css”导入样式；
从“同构样式加载器/样式”导入样式；
函数Navbar（）{
常量语言=[
{
名称：'全部'，
参数：“全部”，
},
{
名称：“JavaScript”，
参数：“javascript”，
},
{
名称：“Ruby”，
参数：“ruby”，
},
{
名称：“Python”，
param:'python'，
},
{
名称：“Java”，
参数：“java”，
},
];
返回(

{languages.map（{name，param}）=>(

{name}

))}

);
}
导出默认样式（样式）（导航栏）；
我也面临同样的问题。问题与css加载程序有关。同构样式加载器需要公共JS模块语法

试试这个：

{
  loader: 'css-loader',
  options: {
    importLoaders: 1,
    esModule: false,
  },
}

谢谢你，你是我的英雄：）
import React from 'react';
import { NavLink } from 'react-router-dom';
import style from './css/style.css';
import withStyles from 'isomorphic-style-loader/withStyles';

function Navbar() {
    const languages = [
        {
            name: 'All',
            param: 'all',
        },
        {
            name: 'JavaScript',
            param: 'javascript',
        },
        {
            name: 'Ruby',
            param: 'ruby',
        },
        {
            name: 'Python',
            param: 'python',
        },
        {
            name: 'Java',
            param: 'java',
        },
    ];

    return (
        <ul className='navbar'>
            {languages.map(({ name, param }) => (
                <li key={param}>
                    <NavLink
                        activeStyle={{ fontWeight: 'bold' }}
                        to={`/popular/${param}`}
                    >
                        {name}
                    </NavLink>
                </li>
            ))}
        </ul>
    );
}

export default withStyles(style)(Navbar);

{
  loader: 'css-loader',
  options: {
    importLoaders: 1,
    esModule: false,
  },
}