如何在nuxt中使用sass全局變量，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)成立于2013年，先為東昌等服務(wù)建站，東昌等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為東昌企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

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

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

以上這種通用的變量抽出來(lái)，方便你在其他scss的樣式里面調(diào)用

比如

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

只存儲(chǔ)變量，別放公共的樣式進(jìn)去切記公共的樣式 你可以參考我之前的博客那種寫法 

我直接上案例吧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

第三 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了，閑麻煩 你就直接從我開頭給的鏈接進(jìn)去下下來(lái)demo  直接運(yùn)行就好了。

另外，因?yàn)槲疫@個(gè)案例 是   引入 scss 的寫法 ，如果你是寫在style的  要這么寫

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

看完上述內(nèi)容，你們掌握如何在nuxt中使用sass全局變量的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！