[英]Adding CSS to React SSR Components
我正在嘗試使用 SSR 將 CSS 添加到我在 React 中構建的組件中,但我無法這樣做。
我看過的東西:
但沒有一個過程是簡單的或明確提到的。 我經常嘗試的是同構加載器,它看起來很有希望,但在我的 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,
};
下面的配置使 CSS 工作
安裝的軟件包:
babel-plugin-dynamic-import-node, babel-plugin-css-modules-transform, mini-css-extract-plugin, css-loader, style-loader
索引.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.