详解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 = { 

 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



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。