javascript - React SSR コンポーネントへの CSS の追加

Question

SSR を使用して React でビルドされたコンポーネントに CSS を追加しようとしていますが、できません。

私が見たもの：

• https://www.npmjs.com/package/isomorphic-style-loader
• https://cssinjs.org/server-side-rendering/?v=v10.0.0-alpha.22
• webpack ローダー

しかし、プロセスが単純で明確に言及されているものはありません。私が何度も試したのは、有望に思われる同形ローダーでしたが、CSS ファイルに設定した後、いくつかのあいまいなエラーが発生しました。

予期しないトークン (1:0) このファイル タイプを処理するには、適切なローダーが必要な場合があります。

これは私の定型パッケージです - 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,
};