node.js - 在 SSR 上的反应组件中导入 scss
问题描述
我正在使用 webpack react express 和 ssr(服务器端渲染)构建一个骨架(为我自己或任何想要它的人)。
我遇到了一个问题,我无法在反应组件中导入 scss。
出于某种原因,我可以将它们导入到我做的文件中ReactDOM.hydrate
我尝试了数百种不同的 webpack 配置,还尝试生成单个 css 文件,但我也无法做到。
scss 配置
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}
package.json 依赖:
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.3",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"isomorphic-style-loader": "^4.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-node-externals": "^1.7.2"
"axios": "^0.18.0",
"express": "^4.16.4",
"react": "^16.7.0",
"react-dom": "^16.7.0"
我可以需要scss的简单水合物文件:
require('./index.scss');
const React = require('react');
const ReactDOM = require('react-dom');
const Search = require('./Search');
ReactDOM.hydrate(<Search text={window.__INITIAL__.text} />,
document.getElementById('root'));
传递给 hydra 的相同组件在我无法添加 require 的地方导致 webpack 编译中断。
const React = require('react')
const Nav = require('../../components/nav/Nav.js')
class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text || null,
}
}
render() {
return (
<div id="main">
<Nav />
<p>{this.state.text}</p>
</div>
);
}
}
module.exports = Search;
我试图让require or import
每个组件内部工作,但到目前为止还不能。
解决方案
你可以使用这个 webpack 配置在你的 ssr 中添加 sass 并做出反应。
网络包配置:
const path = require('path');
const isDevelopment = true;
module.exports = [
{
name: 'client',
target: 'web',
entry: './client.jsx',
output: {
path: path.join(__dirname, 'static'),
filename: 'client.js',
publicPath: '/static/',
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules\/)/,
use: [
{
loader: 'babel-loader',
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: isDevelopment,
}
},
{
loader: 'sass-loader'
}
]
}
],
},
},
{
name: 'server',
target: 'node',
entry: './server.jsx',
output: {
path: path.join(__dirname, 'static'),
filename: 'server.js',
libraryTarget: 'commonjs2',
publicPath: '/static/',
},
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules\/)/,
use: [
{
loader: 'babel-loader',
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'isomorphic-style-loader',
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: isDevelopment,
}
},
{
loader: 'sass-loader'
}
]
}
],
},
}
];
我设置了一个样板,你可以在这里使用它: https ://stackoverflow.com/a/68600509/6200607