scss导出颜色变量为空对象问题,导致样式不生效问题

scss导出颜色变量为空对象

scss文件

$base-menu-color:#bfcbd9;
:export {
  menuColor: $base-menu-color
}

页面使用

import variables from "@/assets/styles/variables.scss";

然后打印发现

console.log(variables) // {} 打印值为空对象

此时我们需要将文件名variables.scss改为variables.module.scss

再看打印结果

import variables from "@/assets/styles/variables.module.scss";
console.log(variables) // {menuColor:'#bfcbd9'} 

SCSS中的css变量定义及调用

scss和js的交互

import variables from '../data/variables.scss'

computed:{
 variables() {
      return variables
    }
}

1、定义variables.scss文件

// 全局变量

// 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
$g-header-width: 100%;
// 头部高度
$g-header-height: 70px;
// 侧边栏宽度
$g-main-sidebar-width: 70px;
$g-sub-sidebar-width: 220px;
$g-sidebar-width: var(--real-sidebar-width);
// 侧边栏Logo高度
$g-sidebar-logo-height: 50px;
// 顶部导航栏高度
$g-topbar-height: 50px;

// 应用背景色
$g-app-bg: #fff;
// 主区域背景色
$g-main-bg: #f5f7f9;

// 头部背景色
$g-header-bg: #222b45;
// 头部导航文字颜色
$g-header-menu-color: #fff;
// 头部导航选中颜色
$g-header-menu-active-bg: lighten($g-header-bg, 10);

// 主侧边栏背景色
$g-main-sidebar-bg: #222b45;
// 主侧边栏文字颜色
$g-main-sidebar-menu-color: #fff;
// 主侧边栏菜单选中背景色
$g-main-sidebar-menu-active-bg: lighten($g-main-sidebar-bg, 10);

// 次侧边栏背景色
$g-sub-sidebar-bg: #fafafa;
// 次侧边栏菜单文字颜色
$g-sub-sidebar-menu-color: #37414b;
// 次侧边栏菜单文字选中颜色
$g-sub-sidebar-menu-active-color: #e7f4ff;
// 次侧边栏菜单选中背景色
$g-sub-sidebar-menu-active-bg: #5482ee;

// 输出给js使用
:export {
    g_main_sidebar_width: $g-main-sidebar-width;
    g_sub_sidebar_width: $g-sub-sidebar-width;
    g_sidebar_width: $g-main-sidebar-width + $g-sub-sidebar-width;
    g_app_bg: $g-app-bg;
    g_main_bg: $g-main-bg;
    g_header_bg: $g-header-bg;
    g_header_menu_color: $g-header-menu-color;
    g_header_menu_active_bg: $g-header-menu-active-bg;
    g_main_sidebar_bg: $g-main-sidebar-bg;
    g_main_sidebar_menu_color: $g-main-sidebar-menu-color;
    g_main_sidebar_menu_active_bg: $g-main-sidebar-menu-active-bg;
    g_sub_sidebar_bg: $g-sub-sidebar-bg;
    g_sub_sidebar_menu_color: $g-sub-sidebar-menu-color;
    g_sub_sidebar_menu_active_color: $g-sub-sidebar-menu-active-color;
    g_sub_sidebar_menu_active_bg: $g-sub-sidebar-menu-active-bg;
}

2、在style标签中调用

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

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}
.tools-wrap-hidden{  
    z-index: 1;  
    position: absolute;  
    left: $base-sidebar-width + 10;  
    top: 4em;  
    display: flex;  
    flex-direction: column;
}
</style>

3、在其他css文件中调用方式

@import './variables.scss';

4、在代码中调用方式

<div  :style="{ backgroundColor: settings.sideTheme === 'theme-dark' 
        ? variables.menuBackground : variables.menuLightBackgroundMy }">

import variables from "@/assets/styles/variables.scss";

export default {
    computed: {
        variables() {
           return variables;
       },
   }
}

Vue项目引入全局scss变量引用失败

blog.csdn.net/qq_44859233...

很多博客都是讲的很混乱，配置也没有说清楚，所以在此记录一下，方便自己学习

首先可以去看VueCLi的官网，地址是cli.vuejs.org/zh/guide/cr...

1.安装预处理器

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

但是你会发现，只是看完文档，然后你去操作，还是报错：

官方文档是这样写的，我就不贴这部分代码了，因为还是会报错

报错如下：

配置vue.config.js-方法1

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        prependData : `@import "~@/assets/main.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData : `@import "~@/assets/main.scss";`
      }
    }
  }
}

注意：这里的把additionalData属性换成了prependData ，不然会出现版本问题

在使用最新版本的sass-loader(version>=8.0.0)的时候 additionalData 这个配置已经不再支持，这里是本次更新的issus(github.com/webpack-con... )，而是使用 prependData 代替，所以，配置如上

配置vue.config.js-方法2

vue.config.js文件

module.exports = {
  chainWebpack: (chain) => {
      const oneofsMap =  chain.module.rule('scss').oneOfs.store
      oneofsMap.forEach(item=>{
          item
          .use('sass-resources-loader')
          .loader('sass-resources-loader')
          .options({
            resources: './node_modules/element-plus/dist/main.scss',
          })
      })
  }
}

以上两种方法我都测试过了，现阶段可以使用，如果以后sass预处理器又出现新的语法，那可能还是需要取sass官网查看，希望能够帮到大家