Webpack SSR项目引入SCSS报错：Module parse failed: Unexpected token

错误信息 #

ERROR in ./src/client/styles/Calculator.scss 1:3
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
h1 {
color: aqua;
| }
@ ./src/client/pages/Calculator.tsx 40:0-35
@ ./src/client/App.tsx 3:0-44 13:33-43
@ ./src/server/server.tsx 9:0-32 23:40-43

问题根源 #

从错误的依赖链可以看出：服务端打包流程中正在处理SCSS文件，但你的Server Webpack配置没有配置对应的SCSS处理规则。另外，客户端使用的style-loader无法在Node.js环境（服务端配置target: 'node'）中运行，因为它依赖浏览器的DOM API。

解决方案 #

为客户端和服务端分别配置适配的SCSS Loader，同时在服务端配置中添加SCSS处理规则，使用css-loader的exportOnlyLocals选项（仅导出样式类名，不生成浏览器端的样式注入代码）。

修改后的完整Webpack配置 #

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const babelLoader = {
  test: /\.(ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]]
    }
  }
}

// 客户端SCSS Loader：使用style-loader将样式注入浏览器
const clientScssLoader = {
  test: /\.s[ac]ss$/i,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

// 服务端SCSS Loader：仅导出类名，适配Node环境
const serverScssLoader = {
  test: /\.s[ac]ss$/i,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: {
          exportOnlyLocals: true,
        },
      },
    },
    'sass-loader',
  ],
}

const resolve = {
  extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
}

const serverConfig = {
  target: 'node',
  mode: 'development',
  entry: './src/server/server.tsx',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'server.cjs'
  },
  module: {
    rules: [babelLoader, serverScssLoader] // 添加服务端SCSS处理规则
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      PORT: 3000
    })
  ],
  resolve
}

const clientConfig = {
  target: 'web',
  mode: 'development',
  entry: './src/client/index.tsx',
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/static',
    filename: 'client.js'
  },
  module: {
    rules: [babelLoader, clientScssLoader]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: `${__dirname}/src/client/index.html`
    })
  ],
  resolve
}

module.exports = [clientConfig, serverConfig]

补充说明 #

• exportOnlyLocals选项让css-loader只导出样式类名，服务端渲染时只需要传递类名给组件，样式的注入和渲染交给客户端完成
• 生产环境下，客户端建议替换style-loader为mini-css-extract-plugin，将样式提取为单独的CSS文件，优化加载性能

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