Webpack中CSS/SASS的Loader规则能否拆分？拆分失效原因解析

给Webpack配置添加SASS支持时遇到以下问题：

• 原有一套CSS Loader规则，尝试新增单独的sass-loader规则，并将css-loader的importLoaders改为2，但处理Bootstrap的scss文件时出现解析错误。
• 将所有Loader合并为一个.scss规则可正常运行，但会丢失原CSS规则且存在配置重复。

需要解决：为什么拆分规则会失效，以及如何同时处理CSS和SASS文件。

原有CSS规则：

rules: [
  {
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  },
  {
    test: /\.ts(x?)$/i,
    loader: "ts-loader",
    include: path.resolve(__dirname, "src")
  }
]

尝试拆分后的规则：

rules: [
  {
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 2
        }
      },
      "postcss-loader"
    ]
  },
  {
    test: /\.scss$/i,
    loader: "sass-loader"
  },
  {
    test: /\.ts(x?)$/i,
    loader: "ts-loader",
    include: path.resolve(__dirname, "src")
  }
]

报错信息：

./node_modules/bootstrap/scss/bootstrap.scss 228 KiB [built] [1 error]
ERROR in ./node_modules/bootstrap/scss/bootstrap.scss 1:0 Module parse
failed: Unexpected character '@' (1:0) File was processed with these
loaders:  * ./node_modules/sass-loader/dist/cjs.js You may need an
additional loader to handle the result of these loaders.

@charset "UTF-8"; | /*! |  * Bootstrap  v5.2.3 (https://getbootstrap.com/)  @ ./src/index.tsx 1:0-39

合并后的有效规则：

rules: [
  {
    test: /\.scss$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 2
        }
      },
      "postcss-loader",
      "sass-loader"
    ]
  },
  {
    test: /\.ts(x?)$/i,
    loader: "ts-loader",
    include: path.resolve(__dirname, "src")
  }
]

拆分规则失效的核心原因：

• sass-loader仅负责把SCSS编译成CSS，但编译后的CSS内容还需要css-loader处理模块化、@import等逻辑，再通过style-loader注入到页面。单独给.scss文件只配置sass-loader，Webpack拿到编译后的CSS代码后，没有后续loader处理，自然解析不了@charset这类CSS语法。
• 给CSS规则里的css-loader设置importLoaders:2，但这个配置仅对CSS文件生效，SCSS规则根本没用到该css-loader，完全起不到作用。

要同时处理CSS和SCSS文件，需保留原有CSS规则，同时给SCSS文件配置完整的loader链（包含sass-loader + 原有CSS处理loader）：

rules: [
  // 保留原有的CSS规则，处理纯.css文件
  {
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 1 // CSS文件仅需先走postcss-loader，因此设为1
        }
      },
      "postcss-loader"
    ]
  },
  // 新增SCSS规则，完整loader链：从后往前执行
  {
    test: /\.scss$/i,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 2 // 设为2，确保css-loader处理@import资源时，先经过postcss-loader和sass-loader
        }
      },
      "postcss-loader",
      "sass-loader"
    ]
  },
  {
    test: /\.ts(x?)$/i,
    loader: "ts-loader",
    include: path.resolve(__dirname, "src")
  }
]

关键说明：

• Webpack的loader是从后往前执行的，SCSS规则的执行顺序为：sass-loader（编译SCSS到CSS）→ postcss-loader（处理CSS兼容）→ css-loader（解析CSS模块、@import）→ style-loader（注入页面）
• 原有CSS规则保留，确保纯CSS文件正常处理；SCSS规则复用CSS处理逻辑，避免配置重复

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