详解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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
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
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
js css自定义分页效果
2017/02/24 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
vue如何判断dom的class
2018/04/26 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python中格式化format()方法详解
2017/04/01 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python实现门限回归方式
2020/02/29 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
一月红领巾广播稿
2014/02/11 职场文书
雷锋的观后感
2015/06/10 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android