全局Scss变量引入配置

最新推荐文章于 2024-03-21 10:00:00 发布
VIP文章 最新推荐文章于 2024-03-21 10:00:00 发布
阅读量3k 收藏 3
点赞数
分类专栏： Vue 前端 文章标签： vue scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lm278858445/article/details/115323600
版权

背景

scss变量定义全局并拆分为独立文件后，在Vue文件组件中使用时需要进行严格import操作，否则无法找到变量，为了后续使用方便，期望能够一次引用，全局使用。

相关环境说明

  • vue cli： 3.x
  • vue： 2.6.12
  • node-sass： 4.12.0
  • sass-loader： 8.0.0
  • vue-template-compiler： 2.6.12

配置说明

1、在assets文件目录下定义全局变量文件：

...
$global_height: 64px;
$global_width: 220px;
...

2、在文件vue.config.js中配置scss文件预处理

module.exports
最低0.47元/天 解锁文章
坐在路边数星星
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue引入sass并配置全局变量的方法
08-27
主要介绍了Vue引入sass并配置全局变量的方法
vuecli3 引入全局scss变量_vuecli3 从搭建到优化
weixin_42545292的博客
12-30 1189
编者按：本文转载自掘金专栏，由作者 lMadman 授权奇舞周刊转载。前言github地址：https://github.com/LeeStaySmall/vue-project-demo (完整分支：optimize分支)demo地址：http://vue-project-demo.eloco.cn/安装与初始化安装node >= 8.9 推荐：8.11.0 +安装：npm in...
vue2使用scss，并且全局引入公共scss样式变量
CSSAJBQ_的博客
03-27 1862
vue2使用scss，并且全局引入公共scss样式变量
css预处理器scss的使用&&如何全局引入
最新发布
Mr.小灰狼_随笔
03-21 1632
css预处理器scss的使用&&如何全局引入 目录 scss 基本功能 1、嵌套 2、变量 $ 3、@mixin 和 @include 4、@extend 5、@import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件
【学习记录8】vue项目中全局引入cass（scss）变量和sass（scss） mixin
wenhui的博客
04-13 621
一、全局引入cass（scss）变量和sass（scss） nixin，这样就可以直接使用变量和mixin了，不用给每个vue文件都import相关文件 1、使用场景 variable.scss文件样例 // 颜色定义规范 $color-background: #222; mixin.scss文件样例 // 背景图片 @mixin bg-image($url) { background-image: url($url + "@2x.png"); @media (-webkit-min-
全局使用scss变量
Zxf_xcn的博客
11-03 604
// vue.config.js module.exports = { css: { loaderOptions: { scss: { prependData: `@import "@/assets/css/mainTheme.scss";`, //这样就可以全局使用mainTheme的变量，不用每个页面引入 }, }, }, }; sass-loader版本不同，loaderOptions中additionalData的键名也不同 s
说一说scss的变量的全局引用
banxia561的博客
12-26 1525
想要建立一套完整的样式体系，使用scss肯定想要用它的变量带来的方便咯，但是之前在入口vue文件引入改样式文件之后并不会达到全局引用的效果，想要使用还是要需要的地方逐个引用，很心塞，知道有天发现了这个sass-resources-loader，问题就解决了，具体用法如下参考 { test: /\.(sa|sc)ss$/, use: [ MiniCssExtractPlug...
vue项目scss定义全局变量--颜色变量
qq_41227106的博客
02-14 1万+
1、建立一个vue项目，并且该项目使用scss语法 2、定义一个scss文件，里面定义一个全局的变量 3、在build下的utils.js中配置scss: generateLoaders('sass')，把css: generateLoaders('sass'),修改为 scss: generateLoaders('sass') .concat( { loader: 'sass...
scss引入其他scss变量，且通过js动态修改scss变量（亲测，已修改）
weixin_46547740的博客
03-26 1万+
先展示结果 统一用的html <template> <div class="home"> <h1>Gordon-Liu</h1> <h2 ref="h2">Gordon-Liu</h2> <h3>Gordon-Liu</h3> </div> </template> 1、scss引入其他scss变量 test.scss文件 //定义scss变量
（配置）vue中scss配置全局变量使用
次顶级的博客
01-07 5438
vue中scss配置全局变量使用
在项目中全局引入scss的变量，以及如何在js中使用scss变量
D浩DzD的博客
05-07 2204
在项目中发现已经在main.js中全局引入了样式文件，但是对于scss中的变量还是不能在页面中直接使用，还需要再具体的页面中导入。上面这种方式比较麻烦。可以通过在vue.config.js中配置后只需要在main.js中引入就可以全局使用了。下图在main.js中引入了scss的样式文件。必须在具体页面中引入才能正常使用。
Scss 基本使用（变量、嵌套）
明天也要努力的博客
11-29 2万+
1. Scss 简介 Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。 Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。 因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是
vue-scss-variable-scan:让vscode在vue文件中提示scss自定义变量
04-29
vue-scss变量扫描这是一个扩展，允许vscode在Vue和Scss文件中提示SCSS的自定义变量。扩展设置有以下四个设置： vue-scss-variable-scan.globalPath ：SCSS扫描变量的路径（默认值：src / ** / *。scss） vue-scss-...
vue如何引入sass全局变量
12-12
在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者...
详解vue项目中如何引入全局sass/less变量、function、mixin
08-27
主要介绍了详解vue项目中如何引入全局sass/less变量、function、mixin，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
滑动窗口算法（Sliding Window Algorithm）
热门推荐
lm278858445的专栏
03-05 4万+
滑动窗口算法（Sliding Window Algorithm） Sliding window algorithm is used to perform required operation on specific window size of given large buffer or array. This technique shows how a nested for loop in...
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较
lm278858445的专栏
11-28 1万+
实现效果：1.点击按钮展开下拉列表 2.点击下拉列表中的选项进行选择，随后收起下拉列表 3.点击除下拉列表外的位置（包括按钮），收起下拉列表效果图如下所示： 完整代码请查看： https://github.com/wolf-wolf/pullDownList.git实现环境1.angular 2.sublime基本结构：组件的基本HTML结构如下所示：<!-- 外部包裹层 --> <div
如何避免重复addEventListener？
lm278858445的专栏
08-15 1万+
避免重复addEventListener的核心就是在添加前通过removeEventListener将已经添加的处理函数进行移除。如下代码为id=btn的元素添加click事件的处理函数clickHandler： const $btn = document.getElementById('btn'); function clickHandler() { console.info(`thi...
echartsInstance. setOption 被忽略的配置项 notMerge —— Echarts小记
lm278858445的专栏
04-11 4806
通过设置 echartsInstance. setOption 的 notMerge 属性，保证涉及 series 变动的数据更新后的正常展示方式
Nuxt怎么引入全局scss变量
04-02
要在Nuxt中引入全局SCSS变量，可以如下操作： 1. 在`assets`目录下创建`scss`文件夹，并在其中创建一个`variables.scss`文件，用于定义全局变量。 2. 在`nuxt.config.js`中配置`styleResources`选项，指定需要注入到每个组件中的SCSS文件路径，包括刚刚创建的全局变量文件。 ```javascript export default { ... buildModules: [ '@nuxtjs/style-resources' ], styleResources: { scss: [ '~/assets/scss/variables.scss' ] }, ... } ``` 3. 在需要使用全局变量的组件中，使用`@import`引入全局变量文件。 ```scss <style lang="scss"> @import '~/assets/scss/variables.scss'; ... </style> ``` 这样，就可以在所有组件中使用全局变量了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值