vue——scss变量全局使用

爱被打了一巴掌 2022-10-04 15:42 288阅读 0赞

## vue——scss变量全局使用 ##

### 1.终端安装sass-resources-loader ###

npm install sass-resources-loader --save

### 2.vue.config.js注册 ###

最重要，不然报错SassError: Undefined variable.

module.exports = { 
      outputDir: 'ts-platform',
      css: { 
        loaderOptions: { 
          sass: { 
            prependData: '@import "./src/style/variables.scss";'
            // 报错 ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
            //则改为 data: '@import "./src/style/variables.scss";'
          }
        }
      }
     }

### 3.构建scss变量文件variables.scss ###

我的主要是主题颜色

$navBack: #3D3D3D;
    
    $menuBack: #3D3D3D;
    $menuText: #fff;
    $menuSelect: #FFCB1F;
    
    $logoText: #FFCB1F;
    
    $loginBtn: #FFCB1F;
    $loginBtnText: #3D3D3D;
    
    $loginOut: #EBB964;
    
    $footText: #fff;
    $footTextLogin: #3D3D3D; :export { 
      navBack: $navBack;
      menuBack: $menuBack;
      menuText: $menuText;
      menuSelect: $menuSelect;
      logoText: $logoText;
      loginBtn: $loginBtn;
      loginBtnText: $loginBtnText;
      loginOut: $loginOut;
      footText: $footText;
      footTextLogin: $footTextLogin
    }

### 4.main.js中全局引入 ###

import './style/variables.scss'

### 5.页面使用css ###

<style lang="scss">
    	background: $menuBack;
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP全局变量域超全局变量

PHP全局变量域超全局变量 global name :全局变量（在当前页面全部地方有效） $GLOBALS\[‘name’\] : 超全局变量(在整个网站全部地方有效

叁歲伎倆/ 2023年10月06日 17:09/ 0 赞/ 53 阅读

相关使用JavaScript获取全局变量

Updated 9/1/2015: My original method, `keys(window)` gave unhelpful results in browsers

- 日理万妓/ 2023年02月22日 03:39/ 0 赞/ 8 阅读

相关 python全局变量_Python全局变量

![0db5ad40013cbaa796ccb90143cd2cea.png][] python全局变量 In this tutorial we will be discu

小灰灰/ 2022年12月07日 12:58/ 0 赞/ 318 阅读

相关 chart使用全局模板变量

helm 通过全局变量模板，可以实现yaml高效的复用。 1 创建chart 创建自定义chart [root@k8smaster helm] hel

缺乏、安全感/ 2022年10月18日 00:53/ 0 赞/ 164 阅读

相关 vue——scss变量全局使用

vue——scss变量全局使用 1.终端安装sass-resources-loader npm install sass-resources-loader

爱被打了一巴掌/ 2022年10月04日 15:42/ 0 赞/ 289 阅读

相关 vue中如何使用全局变量和全局函数

先说下我自己的小问题吧，今天原本兴致勃勃的想写一个vue的登录拦截，结果各种不顺利，各种问题出现。总结后一句话，还是对vue不了解。但是，页面还得写，谁叫我敬业呢？说到

我就是我/ 2022年06月10日 04:49/ 0 赞/ 219 阅读

相关 vue 使用全局变量

vue 使用全局变量使用vue中的组件进行请求的时候免不了需要设置baseURL。但是这个baseURL最好不要写在某个全局的vue组件中。如果写到一个组件中的话，打包

缺乏、安全感/ 2022年06月08日 07:18/ 0 赞/ 263 阅读

相关 cpp全局变量和局部变量的使用

0x00代码 int iValue = 100; int main() { int iValue = 200; //就

男娘i/ 2022年06月04日 07:49/ 0 赞/ 300 阅读

相关 vue 使用less全局变量

我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less 全局文件是有必要的，那如何在vue中使用呢？我首先尝试着把co

向右看齐/ 2022年05月20日 03:50/ 0 赞/ 450 阅读

相关 vue 全局使用scss 变量

1.安装scss npm install --save-dev sass-loader //sass-loader依赖于node-sass npm i

野性酷女/ 2022年01月12日 03:09/ 0 赞/ 1131 阅读