詳解nuxt sass全局變量(公共scss解決方案)
恩，經(jīng)過(guò)朋友的幫助搞定的，因?yàn)?nuxt資料比較少的原因，很感謝 “包子”的幫助
注意 本案例 只是把你通用 的 比如
$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;
以上這種通用的變量抽出來(lái)，方便你在其他scss的樣式里面調(diào)用
比如
li {
background: nth($colour,6)
}
只存儲(chǔ)變量，別放公共的樣式進(jìn)去切記公共的樣式 你可以參考我之前的博客那種寫(xiě)法
我直接上案例吧sass_jb51.rar
案例里面有運(yùn)行說(shuō)明
我建議你還是跟我一步一步來(lái)走，比較刻骨銘心
第一步新建文件夾 assets然后新建兩個(gè)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 { }//寫(xiě)死的數(shù)據(jù)
}
}
</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里面是我之前的配置 直接復(fù)制過(guò)來(lái)的 ，但是不礙事，照著做）
{
"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"
}
}
運(yùn)行代碼
這個(gè)是給你本地調(diào)試的 親測(cè) 可以用 你會(huì)發(fā)現(xiàn) 我重復(fù)引用了 sass 這是因?yàn)?第二行 是官網(wǎng)給的， 我怕你更新失敗了，所以讓你在從淘寶更新一遍
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//運(yùn)行
好 到這里沒(méi)了，調(diào)試是沒(méi)問(wèn)題了，如果你要打包成文件
npm run generate//打包 //你打包好要放服務(wù)器上 不然 nuxt默認(rèn)的那幾個(gè)JS會(huì)報(bào)錯(cuò) 你就看不到效果了
要么你入口文件配置好
到這里就OK了，閑麻煩 你就直接從我開(kāi)頭給的鏈接進(jìn)去下下來(lái)demo 直接運(yùn)行就好了。
另外，因?yàn)槲疫@個(gè)案例 是 引入 scss 的寫(xiě)法 ，如果你是寫(xiě)在style的 要這么寫(xiě)
<style lang="scss">
li {
/*background: #fff;*/
background: nth($colour,6)
}
</style>
這里注意了 lang是 scss 不是sass
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
vue3循環(huán)設(shè)置ref并獲取的解決方案
如何寫(xiě)好一個(gè)vue組件,老夫的一年經(jīng)驗(yàn)全在這了（推薦）
Vue使用Axios進(jìn)行跨域請(qǐng)求的方法詳解
vue.js 使用axios實(shí)現(xiàn)下載功能的示例
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版