同构应用中Webpack误将Sass解析为JavaScript的问题排查

这个报错的核心原因很明确：Webpack没有对node_modules里的Sass文件应用你配置的css-loader和sass-loader，而是尝试用默认的JavaScript解析器去处理它，自然会把Sass特有的@import语法当成非法的JS token报错。

为什么会出现这个情况？ #

你的Webpack配置里存在两个关键限制：

1. 你的TypeScript规则明确排除了node_modules：exclude: /node_modules/，当依赖包@cutting/component-library里的index.tsx导入Input.scss时，Webpack找不到对应处理.scss的规则（你的CSS规则没有明确包含node_modules里的文件），于是直接 fallback 到JS解析器处理Sass文件。
2. Webpack默认不会对node_modules里的文件应用自定义loader规则，除非你通过include明确指定要处理的范围。

具体修复步骤 #

1. 调整CSS规则，包含需要处理的依赖包

修改你的CSS loader规则，明确指定要处理src目录和@cutting/component-library包的样式文件，这样Webpack就会用sass-loader和css-loader去解析依赖里的Sass文件：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(css|scss|sass)$/,
        // 明确包含需要处理的目录：你的源码 + 目标组件库
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/@cutting/component-library')
        ],
        use: [
          {
            loader: 'css-loader/locals',
            options: {
              modules: true,
              importLoaders: 2,
              getLocalIdent
            }
          },
          { loader: 'sass-loader' }
        ]
      },
      // ...其他规则
    ]
  }
}

2. 检查TypeScript规则是否需要包含依赖包

如果你的@cutting/component-library提供的是未编译的TS/TSX文件（不是编译后的JS），你还需要调整TypeScript规则，去掉exclude: /node_modules/，或者同样用include指定要处理的包：

{
  test: /\.tsx?$/,
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/@cutting/component-library')
  ],
  loader: 'awesome-typescript-loader',
  options: merge({ useBabel: false, useCache: false }, typescriptOptions)
}

3. 关于css-loader/locals的补充说明

你使用的css-loader/locals是专门用于服务端渲染（SSR）场景的，它只会提取CSS模块的类名，不会生成实际的CSS文件。如果你的同构应用需要在客户端渲染样式，可能需要区分客户端和服务端的Webpack配置：客户端用普通的css-loader + style-loader或mini-css-extract-plugin，服务端保留css-loader/locals。

验证修复 #

修改配置后，重新启动Webpack构建，应该就不会再出现Sass被解析为JavaScript的报错了——Webpack会正确识别依赖里的Sass文件，并通过你配置的loader链处理它。

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