scoped与CSS Modules

最新推荐文章于 2025-06-02 21:52:05 发布

ccopcx

最新推荐文章于 2025-06-02 21:52:05 发布

阅读量736

点赞数

CC 4.0 BY-SA版权

分类专栏：前端--前端优化

本文链接：https://blog.csdn.net/qq_42303885/article/details/85343937

前端--前端优化专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS Modules和Scoped样式的应用技巧，通过实际案例展示了如何在Vue项目中利用Webpack配置实现局部样式的隔离，有效避免全局样式冲突，同时介绍了如何编写和编译带前缀的类名及响应式单位转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scoped

<style lang="scss" scoped>
.page {
  color: #09f;
}
.flex {
  position: relative;
  width: 50px;
  height: 50px;
  opacity: 0.5;
  border: none;
  // resolve 1px problem
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    border-radius: 10px;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
  }
}
</style>

看看编译结果：

.page[data-v-26084dc2] {
  color: #09f;
}
.flex[data-v-26084dc2] {
  position: relative;
  width: 6.667vw;
  height: 6.667vw;
  opacity: 0.5;
  border: none;
}
.flex[data-v-26084dc2]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    border-radius: 1.333vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: left top;
            transform-origin: left top;
}

再看看html结构：
在这里插入图片描述
可以看到给所有元素添加了一个独一无二的属性data-v-26084dc2。并且重新编译后，添加的依然是这个属性。不同组件添加的属性不同。

CSS Modules

在webpack.base.conf.js中：

{
        test: /\.(sc|sa|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true,
              // customize generated class names
              localIdentName: '[local]_[hash:base64:8]'
            }
          },
          'postcss-loader',
          'sass-loader',
        ]
      }

在html结构中：

<p :class="$style.page">login page</p>

写样式的时候：

<style lang="scss" module>
.page {
  color: #09f;
}
</style>

如果有多个类名，可以写成数组，如需要postcss-px-to-viewport中的.ignore类名：

<p :class="[$style.tips, $style.ignore]">home page: hello world</p>

注意不要使用id选择器。

编译结果：

.page_1nmPiQ2K {
  color: #09f;
}
.flex_k-ktwQUa {
  position: relative;
  width: 6.667vw;
  height: 6.667vw;
  opacity: 0.5;
  border: none;
}
.flex_k-ktwQUa::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    border-radius: 1.333vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: left top;
            transform-origin: left top;
}