nuxt sass全局变量也就是公共 scss 解决方案

恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢  “包子”的帮助

注意  本案例  只是把你通用 的 比如  

$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;

以上这种通用的变量抽出来，方便你在其他scss的样式里面调用

比如

li {
    background: nth($colour,6)
}

只存储变量，别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法  

我直接上案例吧http://download.csdn.net/download/xuelang532777032/10050330

案例里面有运行说明 

我建议你还是跟我一步一步来走，比较刻骨铭心

第一步新建文件夹 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

第三 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 [email protected] 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的  要这么写

这里注意了  lang是   scss 不是sass

好，点不点赞看你了，或者 可以加入 我的 群153181864  前端交流群 ，绝对原创，转载请附上 本微博链接。