詳解nuxt sass全局變量(公共scss解決方案)
更新時間：2018年06月27日 09:27:26 作者：雪狼之夜
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
恩，經(jīng)過朋友的幫助搞定的，因?yàn)?nuxt資料比較少的原因，很感謝 “包子”的幫助
注意 本案例 只是把你通用 的 比如
$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;
以上這種通用的變量抽出來，方便你在其他scss的樣式里面調(diào)用
比如
li {
background: nth($colour,6)
}
只存儲變量，別放公共的樣式進(jìn)去切記公共的樣式 你可以參考我之前的博客那種寫法
我直接上案例吧sass_jb51.rar
案例里面有運(yùn)行說明
我建議你還是跟我一步一步來走，比較刻骨銘心
第一步新建文件夾 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
<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)行代碼
這個是給你本地調(diào)試的 親測 可以用 你會發(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)的那幾個JS會報錯 你就看不到效果了
要么你入口文件配置好
到這里就OK了，閑麻煩 你就直接從我開頭給的鏈接進(jìn)去下下來demo 直接運(yùn)行就好了。
另外，因?yàn)槲疫@個案例 是 引入 scss 的寫法 ，如果你是寫在style的 要這么寫
<style lang="scss">
li {
/*background: #fff;*/
background: nth($colour,6)
}
</style>
這里注意了 lang是 scss 不是sass
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本文主要介紹了vue中ref實(shí)現(xiàn)子向父傳值的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要為大家詳細(xì)介紹了在vue2中如何處理xml格式的數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-03-03
vue3循環(huán)設(shè)置ref并獲取的解決方案
我們在平時做業(yè)務(wù)的時候,父子組件通信會經(jīng)常用到ref,這篇文章主要給大家介紹了關(guān)于vue3循環(huán)設(shè)置ref并獲取的解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了Vue中request.js封裝及調(diào)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
如何寫好一個vue組件,老夫的一年經(jīng)驗(yàn)全在這了（推薦）
這篇文章主要介紹了如何寫好一個vue組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在開發(fā)現(xiàn)代?Web?應(yīng)用時,前端和后端通常分離部署在不同的服務(wù)器上,這就會引發(fā)跨域請求問題,所以本文將詳細(xì)介紹如何在?Vue?項(xiàng)目中使用?Axios?發(fā)起跨域請求時解決跨域問題的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue.js 使用axios實(shí)現(xiàn)下載功能的示例
下面小編就為大家分享一篇vue.js 使用axios實(shí)現(xiàn)下載功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看2018-03-03
這篇文章主要介紹了Vue中的Strorage本地化存儲詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城上貨組件簡易版，50行js代碼實(shí)現(xiàn)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11