创建 React App 服务器端渲染 SCSS Webpack 错误答案

【问题标题】：Create React App Server Side Rendering SCSS Webpack Error创建 React App 服务器端渲染 SCSS Webpack 错误
【发布时间】：2021-07-11 20:22:15
【问题描述】：

我需要在我们的 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"
  }

【问题讨论】：

标签： reactjs webpack sass babeljs server-side-rendering

【解决方案1】：

请参阅thread 中支持 sass 的 SSR 的生产构建方法。请注意，样式加载器不是 SSR 构建的首选方法。

【讨论】：

【解决方案2】：

使用file-loader和resolve-url-loader在scss中加载字体文件

{
    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']
    })
}

【讨论】：

我更喜欢使用排除：[/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/] 而不是包含。您无需担心添加新扩展。这只是一个建议。