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

Posted 2023-02-22

【中文标题】构建同构 React 应用程序时如何处理 SASS 的导入？

【英文标题】：How to handle import of SASS when building isomorphic React app?

【发布时间】：2019-06-06 17:52:20

【问题描述】：

我目前拥有支持 s-s-r 的 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...

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

【参考方案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/

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

【参考方案2】：

我阅读了@Galina 的答案，这很棒。我使用他提到的文章设置了一个样板： https://***.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'
            
          ]
        
      ],
    ,
  
];