构建同构 React 应用程序时如何处理 SASS 的导入？

Question

我目前拥有支持 SSR 的 React 应用程序的当前设置：

• 反应应用
• 通过 webpack 编译 React 应用的 Express 服务器
• 使用 babel-node 运行具有 ES6 特性等的 Express 应用

一切正常，我启动了 Express 应用程序，它编译了我的 React 应用程序等。但是 - 然后我开始将 CSS 模块添加到 React 应用程序，然后当然一切都崩溃了，仅在服务器端课程。当我的 .scss 文件被导入 React 应用程序时，它不知道如何处理它们。

如果我们忘记了 CSS 部分，一切都会按照我的意愿进行。我可以在“开发模式”下运行整个应用程序，其中我有热重载等，babel-node 正在转换我的 ES6 节点代码等。

我已经设置了一个构建脚本，它将节点源编译为有效的 ES5，并且 React 应用程序被捆绑到一个文件中。都很好。

但是我应该如何才能保持我的设置，但是在没有 Node 的情况下工作的 CSS 模块抱怨它不理解该代码？

我想出的中途解决方案是，当我为生产构建所有内容时，我告诉 babel 跳过我的 serverRender.js 文件（这是导入我的 App.js 的文件，使用 renderToString 等，而是使用 Webpack 编译该特定文件（使用 isomorphic-style-loader、css-loader 等），并将其输出到我的“服务器”文件夹/结构的正确文件夹中。这可行，但感觉不对。 然后如果我回到在开发模式下运行，我基本上又会遇到同样的问题，如果我不为那部分开发设置 Webpack...

谁能告诉我进行此设置的更好方法？

Answer 1

我在使用同构 React 应用程序时遇到了同样的问题。无论我尝试了什么，我都遇到了这里描述的问题：SCSS compilation in an isomorphic React app 或以下错误：

错误：模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。

我能够通过将 isomorphic-style-loader 包添加到 webpack 中的服务器配置来解决问题。 这是 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-modules/

让我知道它是否对你有用，或者你能想出更好的解决方案。

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