详解nuxtsass全局变量(公共scss解决方案)_uniapprequire - CSDN文库

74 浏览量更新于2023-05-06 评论收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解详解nuxt sass全局变量全局变量(公共公共scss解决方案解决方案)

恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢 “包子”的帮助

注意本案例只是把你通用的比如

$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;

以上这种通用的变量抽出来，方便你在其他scss的样式里面调用

比如

li {

background: nth($colour,6)

}

只存储变量，别放公共的样式进去切记公共的样式你可以参考我之前的博客那种写法

我直接上案例吧sass_jb51.rar

案例里面有运行说明

我建议你还是跟我一步一步来走，比较刻骨铭心

第一步新建文件夹 assets然后新建两个scss文件 a1.scss cyc.scss

a1.scss

@charset "utf-8";

li {

span{color: nth($colour,6)}

}

cyc.scss

@charset "utf-8";

//font

body{

background: yellow;

}

$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;

第二新建 pages/index.vue

<template>

<ul>

<li><span>1232323231</span></li>

<li><span>你好是多少打算的</span></li>

</ul>

</template>

<script>

import '~/assets/a1.scss';

export default {

name: 'date',

data () {

return { }//写死的数据

}

}

</script>

<style>

</style>

第三 nuxt.config.js

const webpack = require('webpack');

module.exports = {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38690089

粉丝: 5
资源: 925

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈