如何通过SASS配置或Webpack插件自动生成伪类对应普通CSS类规则

实现方案 #

你可以通过两种方式实现需求，分别对应Sass原生能力和Webpack配套插件：

方案1：Sass 自定义Mixin（无额外依赖）

适合小型项目，只需提前封装通用Mixin，无需引入第三方工具：

// 提前定义通用Mixin
@mixin pseudo($pseudo) {
  &:#{$pseudo},
  &.#{$pseudo} {
    @content;
  }
}

// 业务代码使用示例
span {
  a {
    @include pseudo(focus) {
      color: red;
    }
  }
}

编译后输出结果完全符合你的预期：

span a:focus,
span a.focus {
  color: red;
}

方案2：PostCSS 插件全量自动化处理

如果项目规模大、伪类规则多，不想逐个修改原有代码，可以通过PostCSS插件配合Webpack打包流程，自动处理所有现有伪类规则：

1. 安装依赖：
   npm install postcss postcss-pseudo-classes postcss-loader --save-dev
2. 新增postcss.config.js配置：

module.exports = {
  plugins: [
    require('postcss-pseudo-classes')({
      // 按需配置要转换的伪类
      include: ['hover', 'focus', 'active'],
      // 生成的类名不带前缀，和伪类同名
      prefix: '',
      // 设为true则合并选择器输出，设为false则分开生成两条独立规则
      mergeSelectors: true
    })
  ]
}

3. 调整Webpack配置，给scss处理规则新增postcss-loader（需放在sass-loader之前执行）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]
  }
}

配置完成后无需改动原有业务代码，所有符合规则的伪类样式都会自动生成对应的普通类样式。

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