Vue js Vue-cli 执行“npm run build”，将图像不透明度的 css 编译为 1%

Posted 2023-02-22

【中文标题】Vue js Vue-cli 执行“npm run build”，将图像不透明度的 css 编译为 1%

【英文标题】：Vue js Vue-cli performing "npm run build", compiles css for image opacity to 1%

【发布时间】：2020-04-08 10:29:28

【问题描述】：

当我执行npm run serve 时，一切都按预期工作。

当我执行npm run build 时，“没有错误”。

当我在网站上掠夺时看不到图像，然后我检查元素我发现我的画廊部分中的图像不透明度变为 1%。

这是我的模板代码：

<div class="gallery container">
  <div
    class="images"
    v-for="(image, index) in images"
    :key="index"
  >
    <img :src="image.small" @click="selectImage(index)" />
  </div>
</div>

我的 scss 代码：

 <style lang="scss" scoped>
    .gallery-wrapper 
      padding: 3rem 0;
      .gallery 
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        .images 
          display: flex;
          justify-content: center;
          align-items: center;
          img 
            height: auto;
            cursor: pointer;
            width: 100%;
            opacity: 85%;
            border: 5px solid aliceblue;
            &:hover 
              opacity: 100%;
              transition: 0.5s;
              border: none;
              margin: 5px 0;
              box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
              width: 90%;
            
          
        
      
    
    </style>

其他图像工作正常。执行npm run build 时，只有图库图像会改变不透明度。

我查看了 dist 文件夹，它生成了一个不透明度为 1% 的类。

构建结果 dist/css/app.ae40bac8.css：

 .gallery-wrapper .gallery .images img[data-v-c5a51ec0] 
  height: auto;
  cursor: pointer;
  width: 100%;
  opacity: 1%;
  border: 5px solid #f0f8ff;

.gallery-wrapper .gallery .images img[data-v-c5a51ec0]:hover 
  opacity: 1%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border: none;
  margin: 5px 0;
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
  width: 90%;

似乎 webpack 生成了错误的不透明度。

【问题讨论】：

CSS 检查器应该显示opacity 覆盖来自哪里

我这样做了，不是因为它被覆盖了。编译后的 css 文件，“npm run build”的结果。本身是 1% 的不透明度；

酷，感谢您的澄清。不会真的是 Webpack，但更可能是 node-sass / sass-loader 中的东西。尝试使用opacity: 0.85 和opacity: 1 而不是百分比

有趣的是，只有img 部分具有范围数据属性。您的“scss 代码” 在哪里？你的哪些组件有 <style scoped> 块，里面有什么？

是的！谢谢你，先生。所以 sass 中的百分比是问题。

【参考方案1】：

对我有用的是使用 0.85 而不是 85%