詳解nuxt sass全局變量(公共scss解決方案)
恩，經(jīng)過朋友的幫助搞定的，因?yàn)?nuxt資料比較少的原因，很感謝 “包子”的幫助
注意 本案例 只是把你通用 的 比如
$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;
以上這種通用的變量抽出來，方便你在其他scss的樣式里面調(diào)用
比如
li {
background: nth($colour,6)
}
只存儲(chǔ)變量，別放公共的樣式進(jìn)去切記公共的樣式 你可以參考我之前的博客那種寫法
我直接上案例吧sass_jb51.rar
案例里面有運(yùn)行說明
我建議你還是跟我一步一步來走，比較刻骨銘心
第一步新建文件夾 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 { }//寫死的數(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ù)制過來的 ，但是不礙事，照著做）
{
"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)試的 親測 可以用 你會(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)行
好 到這里沒了，調(diào)試是沒問題了，如果你要打包成文件
npm run generate//打包 //你打包好要放服務(wù)器上 不然 nuxt默認(rèn)的那幾個(gè)JS會(huì)報(bào)錯(cuò) 你就看不到效果了
要么你入口文件配置好
到這里就OK了，閑麻煩 你就直接從我開頭給的鏈接進(jìn)去下下來demo 直接運(yùn)行就好了。
另外，因?yàn)槲疫@個(gè)案例 是 引入 scss 的寫法 ，如果你是寫在style的 要這么寫
<style lang="scss">
li {
/*background: #fff;*/
background: nth($colour,6)
}
</style>
這里注意了 lang是 scss 不是sass
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在使用Vue過渡動(dòng)畫時(shí),注意選擇器優(yōu)先級(jí),謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來定義動(dòng)畫的持續(xù)時(shí)間和樣式,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了最后說說Vue2 SSR 的 Cookies 問題,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:"
在日常開發(fā)中,我們會(huì)遇到一些情況,限制日期的范圍的選擇,下面這篇文章主要給大家介紹了關(guān)于element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:?"placement"的解決方式,需要的朋友可以參考下2022-08-08
vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)
這篇文章主要介紹了vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2022-11-11
關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
目前項(xiàng)目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯(cuò)亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧2023-11-11
詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項(xiàng)目里正確地引用 jquery 和 jquery-ui的插件，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06