構建同構 React 應用程序時如何處理 SASS 的導入？

Question

我目前擁有支持 SSR 的 React 應用程序的當前設置：

• 反應應用
• 通過 webpack 編譯 React 應用程序的 Express 服務器
• 使用 babel-node 運行具有 ES6 特性等的 Express 應用程序

一切正常，我啟動 Express 應用程序，它編譯我的 React 應用程序等。但是 - 然后我開始將 CSS 模塊轉換為 React 應用程序，然后當然一切都崩潰了，當然只是在服務器端。 當我的 .scss 文件被導入 React 應用程序時，它不知道如何處理。

如果我們忘記了 CSS 部分，一切都會如我所願。 我可以在“開發模式”下運行整個應用程序，在那里我有熱重載等，babel-node 正在轉換我的 ES6 節點代碼等。

我已經設置了一個構建腳本，它將節點源編譯為有效的 ES5，並且 React 應用程序被捆綁到一個文件中。 都好。

但是我應該如何保持我的設置，但是 CSS 模塊在沒有 Node 的情況下工作時抱怨它不理解該代碼？

我想出的半途而廢的解決方案是，當我為生產構建所有東西時，我告訴 babel 跳過我的serverRender.js文件（這是導入我的App.js ，使用renderToString等，而是編譯該特定文件Webpack（使用isomorphic-style-loader 、 css-loader等），並將其輸出到我的“服務器”文件夾/結構的正確文件夾中。這可行，但感覺不對。然后如果我回到在 dev 中運行模式，我基本上又遇到了同樣的問題，如果我也沒有為那部分開發設置 Webpack...

任何人都可以告訴我進行此設置的更好方法嗎？

Answer 1

我在同構React應用程序上遇到相同的問題。 無論我嘗試什么，我都會遇到以下問題： 同構React應用中的SCSS編譯或以下錯誤：

錯誤：模塊解析失敗：意外的令牌（1：0）您可能需要適當的加載器來處理此文件類型。

通過在Webpack的服務器配置中添加isomorphic-style-loader軟件包，我能夠解決該問題。 這是webpack的客戶端配置：

    var browserConfig = {
       //usual stuff
       module: {
         rules: [{
         //... ,
         {
            test: /\.scss$/,
            use: [
                {
                    loader: 'style-loader',
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true, //turns on the CSS Module mode
                        importLoaders: 1,
                        localIdentName: '[name]__[local]___[hash:base64:5]', //generates CSS class names
                        sourceMap: true
                    }
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }
    ]
}

};

和服務器配置：

var serverConfig = { 
   //...
   module: {
    rules: [{
     //... ,
    {
            test: /\.scss$/,
            use: [
                    {
                        loader: 'isomorphic-style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[name]__[local]___[hash:base64:5]',
                            sourceMap: true
                    }
                },
                    {           
                        loader: 'sass-loader'
                }
            ]
    }    
    ]
},
}

有了這些配置，我就可以使用簡單的樣式創建styles.scss：

$blueColor: #2196F3;

.component {
    background: $blueColor;
}

將其導入JS文件：

import myStyles from './styles.scss';

並在render（）中的React組件中使用它：

<div className={ myStyles.component }>

此解決方案由DigitalKwarts提供，您可以在此處找到有關此解決方案的更多詳細信息： https ://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and- CSS模塊/

讓我知道它是否對您有用，或者您能夠提出更好的解決方案。

Answer 2

我閱讀了@Galina 的回答，這很棒。 我使用他提到的文章設置了一個樣板： https : //stackoverflow.com/a/68600509/6200607

它的 webpack.config.js 配置：

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'
            }
          ]
        }
      ],
    },
  }
];