详解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 相关文章推荐
js function使用心得
May 10 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
javascript history对象详解
Feb 09 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
JS使用数组实现的队列功能示例
Mar 04 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 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
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python 多线程实现检测服务器在线情况
2015/11/25 Python
python enumerate函数的使用方法总结
2017/11/15 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python验证身份证信息实例代码
2019/05/06 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
django下创建多个app并设置urls方法
2020/08/02 Python
资深财务管理人员自我评价
2013/09/22 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
就业自我评价
2014/02/04 职场文书
酒店员工检讨书
2014/02/18 职场文书
司机岗位职责说明书
2014/07/29 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
诚信承诺书
2015/01/19 职场文书
Java死锁的排查
2022/05/11 Java/Android
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers