variables.scss不生效，直接写死css样式可以生效

Question

// sidebar
$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;

$menuBg: #304156;
$menuHover: #263445;

$subMenuBg: #1f2d3d;
$subMenuHover: #001528;

$sideBarWidth: 210px;

// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
// JS 与 scss 共享变量，在 scss 中通过 :export 进行导出，在 js 中可通过 ESM 进行导入
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

<template>
  <div class="app-wrapper">
    <!-- 左侧 menu -->
    <sidebar
      id="guide-sidebar"
      class="sidebar-container"
      :style="{ backgroundColor: variables.menuBg }"
    />
    <div class="main-container">
      <div class="fixed-header">
        <!-- 顶部的 navbar -->
        <navbar />
      </div>
      <!-- 内容区 -->
      <app-main />
    </div>
  </div>
</template>

<script setup>
import variables from '@/styles/variables.scss'
import Navbar from './components/Navbar'
import Sidebar from './components/Sidebar'
import AppMain from './components/AppMain'

import {} from 'vue'
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
}
</style>

{
  "name": "mall-admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "element-plus": "^2.1.7",
    "md5": "^2.3.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "core-js": "^3.21.1",
    "cz-customizable": "^6.3.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "sass": "^1.32.7",
    "sass-loader": "^12.6.0",
    "svg-sprite-loader": "^6.0.11",
    "svgo-loader": "^2.2.2",
    "vue-cli-plugin-element-plus": "~0.0.13"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

Answer 1

liuying525 2022-05-31 19:26:45

现在的版本和老师讲课时候的版本不一样了，我指的webpack的。然后我看了前前后后很多的答案，在比较早时候，比较隐蔽的一个答案没有收到重视。但确实解决了这个问题。希望老师的课程跟着改进一下。方法如下：把文件variables.scss命名改成variables.module.scss。响应的引用的部分也都改成这个名字就好了。大家试试，再次呼吁老师把课程改一下，更新修正过来。

• Sunday #1

  你好，这个问题其实已经被置顶问答了：https://coding.imooc.com/learn/questiondetail/RQyZ0PgKDwGPe459.html ，因为那个问答非常详细，所以并没有重新录制。

• 一切都是为了钱 #2

  感谢大佬

Answer 2

surmmerYang 2022-05-20 17:05:59

我也是这个问题 想问下你解决了吗 

• Sunday #1

  可以查看下置顶的问答，看看可不可以解决你的问题。

Answer 3

Sunday 2022-03-29 00:04:54

你好

你的意思是定义的 scss 未生效吗？对于这个错误，因为没有更准确的错误信息，所以我建议你参考下源代码或许可以更快的解答。

并且为你提供这个问答的链接，获取可以帮助你解决一些疑惑：https://coding.imooc.com/learn/questiondetail/RQyZ0PgKDwGPe459.html