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

196 浏览量 2020-11-30 17:38:41 上传评论收藏 52KB PDF 举报

资源推荐

资源详情

资源评论

详解详解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页未读，立即下载

内容反馈

weixin_38690089

粉丝: 5
资源: 924

最新资源

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

feedback-tip