我需要在我们的web应用程序中添加博客，并使我们的应用程序配置为SEO，因此我试图在我当前的create-react应用程序中增加SSR支持。我正在尝试反应水合物和反应渲染方法。我在构建应用程序时遇到以下错误。
ERROR in ./src/assets/scss/theme.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/scss/theme.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../../../fonts/materialdesignicons-webfont.eot?v=5.0.45' in '/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/src/assets/scss'
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:209:21
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
at processTicksAndRejections (internal/process/task_queues.js:75:11)
@ ./src/assets/scss/theme.scss 2:12-140 9:17-24 13:15-22
@ ./src/App.js
@ ./server/index.js
Webpack配置
{
test: /.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
}
开发依赖性
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^5.2.2",
"cssnano": "^5.0.1",
"node-sass": "^4.14.1",
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5",
"postcss-loader": "^5.2.0",
"prettier": "2.2.1",
"sass": "^1.32.8",
"sass-loader": "^7.3.1",
"style-loader": "^2.0.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^1.7.2"
}
使用文件加载器并解析scss 中加载字体文件的url加载器
{
test: /.(woff2?|ttf|otf|eot|svg)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
},
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
})
}
请参阅此线程中支持sass的SSR的生产构建方法。请注意，样式加载器不是SSR构建的首选方法。