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


Posted in Javascript onJune 27, 2018

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

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

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

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

比如

li { 
 background: nth($colour,6) 
}

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

我直接上案例吧sass_3water.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 = { 
 head: { 
  title: 'project', 
  meta: [ 
   { charset: 'utf-8' }, 
   { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 
   { hid: 'description', name: 'description', content: 'Nuxt.js project' } 
  ] 
 }, 
 build: { 
  extend(config,ctx){ 
    const sassResourcesLoader = { 
    loader: 'sass-resources-loader', 
    options: { 
     resources: [ 
     'assets/cyc.scss' 
     ] 
    } 
    } 
    // 遍历nuxt定义的loader配置,向里面添加新的配置。 
    config.module.rules.forEach((rule) => { 
    if (rule.test.toString() === '/\\.vue$/') { 
     rule.options.loaders.sass.push(sassResourcesLoader) 
     rule.options.loaders.scss.push(sassResourcesLoader) 
    } 
    if (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1) { 
     rule.use.push(sassResourcesLoader) 
    } 
    }) 
 
  }, 
 } 
}

第四  package.json  (ps:   package.json里面是我之前的配置 直接复制过来的 ,但是不碍事,照着做)

{ 
 "name": "test", 
 "dependencies": { 
 "axios": "^0.17.0", 
 "css-loader": "^0.28.7", 
 "jquery": "^3.2.1", 
 "mini-toastr": "^0.6.6", 
 "node-sass": "^4.5.3", 
 "nuxt": "^1.0.0-rc11", 
 "postcss-loader": "^2.0.8", 
 "sass-loader": "^6.0.6", 
 "sass-resources-loader": "^1.3.1", 
 "scss": "^0.2.4", 
 "style-loader": "^0.19.0", 
 "vue-notifications": "^0.9.0", 
 "vuex": "^3.0.1" 
 }, 
 "scripts": { 
 "dev": "nuxt", 
 "build": "nuxt build", 
 "start": "nuxt start", 
 "generate": "nuxt generate" 
 }, 
 "devDependencies": { 
 "coffee-loader": "^0.9.0", 
 "coffee-script": "^1.12.7", 
 "node-sass": "^4.5.3", 
 "pug": "^2.0.0-beta6", 
 "pug-loader": "^2.3.0", 
 "sass-loader": "^6.0.6" 
 } 
}

运行代码

这个是给你本地调试的  亲测 可以用  你会发现 我重复引用了  sass  这是因为 第二行  是官网给的, 我怕你更新失败了,所以让你在从淘宝更新一遍

npm install --save nuxt axios vuex 
npm install --save-dev pug@2.0.0-beta6 pug-loader coffee-script coffee-loader node-sass sass-loader 
npm install cnpm 
cnpm install --save node-sass sass-loader postcss-loader sass-resources-loader style-loader css-loader 
npm run dev//运行

好  到这里没了,调试是没问题了,如果你要打包成文件

npm run generate//打包 
//你打包好要放服务器上 不然 nuxt默认的那几个JS会报错 你就看不到效果了

要么你入口文件配置好

到这里就OK了,闲麻烦 你就直接从我开头给的链接进去下下来demo  直接运行就好了。

另外,因为我这个案例 是   引入 scss 的写法 ,如果你是写在style的  要这么写

<style lang="scss"> 
 li { 
  /*background: #fff;*/ 
  background: nth($colour,6) 
 } 
 
</style>

这里注意了  lang是   scss 不是sass

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 #Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 #Javascript
vue中v-model的应用及使用详解
Jun 27 #Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 #Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
Javascript开发包大全整理
2006/12/22 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python的UTC时间转换讲解
2019/02/26 Python
python3实现表白神器
2019/04/09 Python
python实现五子棋游戏
2019/06/18 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
实习推荐信
2014/05/10 职场文书
成绩报告单家长评语
2014/12/30 职场文书
共青团员自我评价
2015/03/10 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
element tree树形组件回显数据问题解决
2022/08/14 Javascript