使用ignore-styles包时，在SSR中使用Sass样式变量的问题

Great question! When working with SSR in a CRA-based setup like ssr-create-react-app-v2 and wanting to use Sass variables—whether in your JS components or for server-side style injection—you’ll need to adjust how the server handles Sass imports since ignore-styles is currently blocking all style processing. Here’s how to tackle both common scenarios:

Scenario 1: Access Sass Variables Directly in JavaScript/TypeScript #

If you want to reuse Sass variable values in your JS logic (e.g., for dynamic styling, component props), follow these steps:

1. Export Sass Variables for JS Consumption #

First, define your variables in a Sass file and use the :export directive to make them accessible to JS:

// src/styles/variables.scss
$primary-color: #2196F3;
$font-size-base: 16px;
$border-radius: 4px;

:export {
  primaryColor: $primary-color;
  fontSizeBase: $font-size-base;
  borderRadius: $border-radius;
}

2. Replace ignore-styles with a Sass-aware Hook #

The ignore-styles package skips all style imports, which means your JS won’t get the exported variables. Replace it with node-sass-require-hook to let the server compile Sass files:

npm install node-sass-require-hook --save-dev

3. Update Your Server Entry File #

Modify your server’s bootstrap code to use the new hook instead of ignore-styles:

const path = require('path');

// Replace require('ignore-styles') with this:
require('node-sass-require-hook')({
  extensions: ['.scss'],
  // Include paths for your Sass files (adjust to match your project structure)
  includePaths: [path.resolve(__dirname, '../src/styles')],
  // Optional: Enable if using CSS Modules
  generateScopedName: '[name]__[local]___[hash:base64:5]'
});

// Keep your existing babel-register setup
require('babel-register')({
  ignore: /\/(build|node_modules)\//,
  presets: ['env', 'react-app'],
  plugins: [
    'syntax-dynamic-import',
    // ... your other plugins
  ]
});

// Rest of your server code...

4. Import Variables in Your Components #

Now you can import and use the variables in your JS components:

import variables from '../styles/variables.scss';

function Button() {
  return (
    <button style={{ backgroundColor: variables.primaryColor, borderRadius: variables.borderRadius }}>
      Click Me
    </button>
  );
}

Scenario 2: Inject Global Sass Styles During SSR #

If you need your global Sass styles to be included in the server-rendered HTML (so users don’t see a flash of unstyled content), you’ll need to adjust your Webpack config for the server:

1. Install Required Webpack Plugins #

npm install mini-css-extract-plugin sass-loader node-sass --save-dev

2. Configure Server Webpack to Process Sass #

Update your server’s Webpack config (usually webpack.server.js) to handle Sass files and extract CSS:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  // ... existing server Webpack config
  module: {
    rules: [
      // ... existing rules
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: [path.resolve(__dirname, '../src/styles')]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // ... existing plugins
    new MiniCssExtractPlugin({ filename: '[name].css' })
  ]
};

3. Inject Extracted CSS into SSR HTML #

After building the server bundle, read the extracted CSS file and inject it into a <style> tag in your HTML template during server rendering:

const fs = require('fs');
const path = require('path');

// In your server render function
const cssContent = fs.readFileSync(path.resolve(__dirname, '../build/server.css'), 'utf8');

const html = `
<!DOCTYPE html>
<html>
  <head>
    <style>${cssContent}</style>
  </head>
  <body>
    <div id="root">${reactDomString}</div>
    <!-- Client bundle script -->
  </body>
</html>
`;

Important Note #

If you use this approach, remove ignore-styles from your server entry—you want the server to process Sass files so Webpack can extract the CSS.

Alternative: Share Variables Between JS and Sass #

If you prefer to define variables once in JS and use them in Sass, you can use sass-loader’s additionalData option to inject JS variables into your Sass files:

1. Define variables in a JS file:

// src/styles/variables.js
module.exports = {
  primaryColor: '#2196F3',
  fontSizeBase: '16px'
};

2. Update sass-loader options in both client and server Webpack configs:

{
  loader: 'sass-loader',
  options: {
    additionalData: (content) => {
      const vars = require('../src/styles/variables.js');
      let sassVars = '';
      Object.entries(vars).forEach(([key, value]) => {
        sassVars += `$${key}: ${value};\n`;
      });
      return sassVars + content;
    }
  }
}

3. Use the variables in Sass directly:

.button {
  background-color: $primaryColor;
  font-size: $fontSizeBase;
}

4. Import the JS file in components for JS usage:

import variables from '../styles/variables.js';

This way you only maintain one source of truth for your variables.

内容的提问来源于stack exchange，提问作者digster