这篇文章主要介绍了详解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
<ul> <li><span>1232323231</span></li><li><span>你好是多少打算的</span></li></ul>
第三 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$/',<span style="color:transparent">来1源gaodai#ma#com搞*代#码1网</span> '/\\.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的 要这么写
li { /*background: #fff;*/ background: nth($colour,6) }
这里注意了 lang是 scss 不是sass
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是详解nuxt sass全局变量(公共scss解决方案)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：详解nuxt sass全局变量(公共scss解决方案)
