JavaScript无反向环视时匹配*.scss且排除*.h.scss的正则实现

嘿，这个问题我刚好有经验！虽然JavaScript早年确实对反向环视支持有限，但我们有两种靠谱的方案来实现你要的需求——匹配所有.scss文件，但排除.h.scss这类文件名。

方案一：兼容所有JavaScript环境（无反向环视依赖） #

如果你的项目需要兼容旧版JS环境（比如老浏览器或低版本Node.js），可以用正向否定环视来实现：

/^(?!.*\.h\.scss$).*\.scss$/

正则解释： #

• ^：锚定字符串开头
• (?!.*\.h\.scss$)：正向否定环视，确保整个文件名不会以.h.scss结尾
• .*\.scss$：匹配任意字符序列，且最终以.scss结尾

方案二：ES2018+环境下的精准写法 #

如果你的环境支持ES2018及以上（现代浏览器、Node.js 10+，Webpack当前版本完全支持），可以用反向否定环视写出更精准的正则：

/^.+(?<!\.h)\.scss$/

正则解释： #

• ^.+：匹配文件名开头至少一个字符（避免空文件名）
• (?<!\.h)：反向否定环视，确保在.scss之前的部分不是.h
• \.scss$：锚定字符串结尾为.scss

测试示例 #

• ✅ 会匹配的文件名：style.scss、component.styles.scss、main.scss
• ❌ 不会匹配的文件名：header.h.scss、layout.h.scss

Webpack配置中使用示例 #

直接把正则放到rules的test参数里即可：

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /^(?!.*\.h\.scss$).*\.scss$/, // 或者用ES2018版本的正则
        use: ['style-loader', 'css-loader', 'sass-loader']
        // 根据你的需求替换loader
      }
    ]
  }
};

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