如何通过Webpack将Vue应用的所有SCSS样式限定在指定容器选择器下？

嘿，我完全懂你现在的麻烦——把Vue应用嵌进传统服务端渲染网站的容器后，全局样式互相污染，一边破坏网站样式，一边自己的应用也乱套。你提到的CSS Modules方向没错，但用法上走偏了，咱们可以用几个不用大量改写现有代码的方案来解决：

方案1：Sass嵌套包裹所有样式（最省心，无需改配置） #

这个方法直接利用Sass的嵌套特性，把所有导入的样式（包括Bootstrap和第三方样式）全部包裹在你的目标容器#account-summary-container下，让所有样式规则自动带上容器前缀，彻底隔离全局污染。

修改你的styles.scss文件，把所有导入语句放在容器选择器的嵌套里：

#account-summary-container {
  // 导入Bootstrap及第三方样式
  @import '~bootstrap/scss/bootstrap';
  @import '../css/feather.min.css';
  @import '../css/icomoon-spinners.css';
  @import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
  
  // 导入你的自定义辅助样式
  @import 'helpers/variables';
  @import 'helpers/mixins';
  @import 'helpers/placeholders';

  // 你的自定义组件样式也放在这里
  // 比如：
  .custom-card {
    margin: 1rem;
    padding: 1.5rem;
  }
}

原理说明 #

Sass编译时会把所有嵌套内的样式规则自动加上父选择器前缀，比如Bootstrap的.btn会变成#account-summary-container .btn，这样你的应用样式只会作用在容器内部，不会污染网站全局；同时网站的全局样式也不会影响容器内的元素（除非用了!important，这种情况可以针对性覆盖）。

这个方案不需要修改Webpack配置，也不用改Vue组件里的类名，零侵入式，最适合你的场景。

方案2：用PostCSS自动包裹样式（适合第三方样式较多的情况） #

如果嵌套导入后出现一些奇怪的问题（比如第三方样式里的全局变量冲突），可以用PostCSS的postcss-wrap插件，自动给所有编译后的CSS规则加上容器前缀，不用手动嵌套导入语句。

步骤： #

1. 安装插件：

npm install postcss-wrap --save-dev

2. 在项目根目录创建postcss.config.js，配置插件：

module.exports = {
  plugins: [
    require('postcss-wrap')({
      selector: '#account-summary-container'
    })
  ]
}

3. 确保你的Webpack配置已经集成了PostCSS（一般vue-cli或者常规Webpack配置都默认支持）。

这样不管你原来的styles.scss怎么写，PostCSS都会自动把所有CSS规则包裹在#account-summary-container下，效果和方案1一样，但更灵活。

方案3：修正CSS Modules的用法（不推荐用于大型框架） #

你之前尝试CSS Modules时出错，是因为composes只能作用于:local的类选择器，不能用ID选择器。如果一定要用CSS Modules，可以给Vue根组件加一个本地类，再组合样式：

在App.vue中：

<template>
  <div :class="$style.accountSummaryApp">
    <!-- 应用内容 -->
  </div>
</template>

<style module>
.accountSummaryApp {
  // 注意：这种方式对Bootstrap这类大型框架兼容性不好，因为很多Bootstrap样式依赖全局选择器
  composes: bootstrap from '~bootstrap/scss/bootstrap.scss';
  composes: feather from '../css/feather.min.css';
}
</style>

不过这个方法不推荐用于Bootstrap，因为Bootstrap的网格系统、全局重置等样式是基于全局选择器的，用composes可能会丢失部分功能，所以还是前两个方案更靠谱。

额外注意事项 #

• 检查是否有遗漏的全局样式：比如你自己写的自定义样式，也要确保放在容器包裹内，避免污染全局。
• 如果网站的全局样式还是渗透进了应用，可以在Vue组件中用::v-deep（Vue 3）或者/deep/（Vue 2）来针对性覆盖，但尽量少用，优先用容器隔离。

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