详解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 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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应用提速面面观
2006/10/09 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python使用opencv读取图片的实例
2017/08/17 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
SQL Server面试题
2013/04/04 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
元旦获奖感言
2014/03/08 职场文书
绿化工程实施方案
2014/03/17 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
班干部演讲稿
2014/04/24 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
Python深度学习之实现卷积神经网络
2021/06/05 Python
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
全新239军机修复记
2022/04/05 无线电