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

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