时间戳

首页 > 解决方案 > Vue：CSS 模块未使用 SCSS 应用或显示

vue.js - Vue：CSS 模块未使用 SCSS 应用或显示

问题描述

如果我使用 CSS 模块，例如：class="$style.headerNew"，当我的类嵌套在 CSS 中的另一个类中时，例如：

#container {
  .headerNew {
    background: blue;
  }
}

CSS未应用，但如果我将它移到外面，它的工作原理如下：

#container {

}
.headerNew {
  background: blue;
}

如果我使用普通的 CSS 类或作用域样式，SCSS 嵌套工作......只是不适用于 CSS 模块语法

<template>
  <div id="container">
    <Header :class="$style.headerNew"/>
  </div>
</template>

<script>
const Header = () => import('./components/Header.vue');

export default {
  name: 'App',
  components: {
    Header
  }
}
</script>

<style module lang="scss">
#container {
  .headerNew {
    background: blue;
  }
}

</style>

包.json

 "dependencies": {
    "core-js": "^3.6.5",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "vue": "^2.6.11"
  },

标签： vue.jsvuejs2

解决方案

您应该阅读此链接，了解如何将 SCSS 安装和导入到 Vue。尝试将其导入main.js文件中。

这是使用预处理器的链接。

还要检查你使用的 sass 和 Vue 的版本是否兼容......我遇到了一些版本相互不兼容的问题。

推荐阅读