详解nuxt sass全局变量(公共scss解决方案)

2023-09-11 02:23:05 284

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

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

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

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

比如

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

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

我直接上案例吧sass_jb51.rar

案例里面有运行说明

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

第一步新建文件夹assets然后新建两个scss文件a1.scsscyc.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

constwebpack=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.jsproject'}
]
},
build:{
extend(config,ctx){
constsassResourcesLoader={
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":"nuxtbuild",
"start":"nuxtstart",
"generate":"nuxtgenerate"
},
"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 这是因为第二行是官网给的，我怕你更新失败了，所以让你在从淘宝更新一遍

npminstall--savenuxtaxiosvuex
npminstall--save-devpug@2.0.0-beta6pug-loadercoffee-scriptcoffee-loadernode-sasssass-loader
npminstallcnpm
cnpminstall--savenode-sasssass-loaderpostcss-loadersass-resources-loaderstyle-loadercss-loader
npmrundev//运行

好到这里没了，调试是没问题了，如果你要打包成文件

npmrungenerate//打包
//你打包好要放服务器上不然nuxt默认的那几个JS会报错你就看不到效果了

要么你入口文件配置好

到这里就OK了，闲麻烦你就直接从我开头给的链接进去下下来demo 直接运行就好了。

另外，因为我这个案例是引入scss的写法，如果你是写在style的要这么写


li{
/*background:#fff;*/
background:nth($colour,6)
}

这里注意了 lang是 scss不是sass

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

详解nuxt sass全局变量(公共scss解决方案)

热门推荐

随机推荐