添加 CSS 到 React SSR 组件

Question

我正在尝试将 CSS 添加到我使用 SSR 在 React 中构建的组件，但我无法这样做。

我看过的东西：

https://www.npmjs.com/package/isomorphic-style-loader
https://cssinjs.org/server-side-rendering/?v=v10.0.0-alpha.22
webpack 加载器

但是在none中过程很简单或者说的很清楚。我尝试了很多次的是同构加载器，它看起来很有前途，但是在我的 CSS 文件中设置它之后它出现了一些模糊的错误：

Unexpected token (1:0) You may need an appropriate loader to handle this file type.

这是我的样板包 - https://github.com/alexnm/react-ssr

如何向我的 React SSR 代码添加样式。

更新

const dev = process.env.NODE_ENV !== "production";
const path = require( "path" );
const { BundleAnalyzerPlugin } = require( "webpack-bundle-analyzer" );
const FriendlyErrorsWebpackPlugin = require( "friendly-errors-webpack-plugin" );

const plugins = [
    new FriendlyErrorsWebpackPlugin(),
];

if ( !dev ) {
    plugins.push( new BundleAnalyzerPlugin( {
        analyzerMode: "static",
        reportFilename: "webpack-report.html",
        openAnalyzer: false,
    } ) );
}

module.exports = {
    mode: dev ? "development" : "production",
    context: path.join( __dirname, "src" ),
    devtool: dev ? "none" : "source-map",
    entry: {
        app: "./client.js",
    },
    resolve: {
        modules: [
            path.resolve( "./src" ),
            "node_modules",
        ],
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
            },
        ],
    },
    output: {
        path: path.resolve( __dirname, "dist" ),
        filename: "[name].bundle.js",
    },
    plugins,
};

Answer 1

以下配置使 CSS 工作
安装的软件包：
babel-plugin-dynamic-import-node, babel-plugin-css-modules-transform, mini-css-extract-plugin, css-loader, style-loader

index.js

require( "babel-register" )( {
presets: [ "env" ],
plugins: [
    [
        "css-modules-transform",
        {
            camelCase: true,
            extensions: [ ".css", ".scss" ],
        }
    ],
    "dynamic-import-node"
],
} );
require( "./src/server" );

webpack.config.js

rules: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: "babel-loader",
        },{
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                },
                'css-loader'
            ],
        },
    ]

在webpack配置中，添加了如下插件

new MiniCssExtractPlugin({
    filename: "styles.css",
}),

在server.js中，在 htmlTemplate 的 head 中添加了以下代码。

<link rel="stylesheet" type="text/css" href="./styles.css" />

用法

import  "./../App.css";

<h2 className="wrapper">F1 2018 Season Calendar</h2>

添加 CSS 到 React SSR 组件

Adding CSS to React SSR Components

javascript

css

reactjs

react-ssr