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

Question

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

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

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

如果我们忘记 CSS 部分，一切都会按我想要的方式运行。我可以在“开发模式”下运行整个应用程序，在那里我有热重载等，babel-node 正在转译我的 ES6 Node 代码等。

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

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

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

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

Answer 1

我在处理同构 React 应用程序时遇到了同样的问题。无论我尝试过什么，我都会遇到此处描述的问题:SCSS compilation in an isomorphic React app或以下错误:

错误:模块解析失败:意外 token (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';

并在 React 组件中的 render() 中使用它:

<div className={ myStyles.component }>

此解决方案由 DigitalKwarts 友情提供，您可以在此处找到有关此解决方案的更多详细信息:https://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and-css-modules/

如果它对您有用或您是否能够想出更好的解决方案，请告诉我。