恩，經過朋友的幫助搞定的，因為 nuxt資料比較少的原因，很感謝 “包子”的幫助
注意 本案例 只是把你通用 的 比如
$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;
以上這種通用的變量抽出來，方便你在其他scss的樣式里面調用
比如
li { background: nth($colour,6) } 只存儲變量，別放公共的樣式進去切記公共的樣式 你可以參考我之前的博客那種寫法
我直接上案例吧sass_jb51.rar
案例里面有運行說明
我建議你還是跟我一步一步來走，比較刻骨銘心
第一步新建文件夾 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 { }//寫死的數據 } } </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里面是我之前的配置 直接復制過來的 ，但是不礙事，照著做）
{ "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" } } 運行代碼
這個是給你本地調試的 親測 可以用 你會發現 我重復引用了 sass 這是因為 第二行 是官網給的， 我怕你更新失敗了，所以讓你在從淘寶更新一遍
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//運行
好 到這里沒了，調試是沒問題了，如果你要打包成文件
npm run generate//打包 //你打包好要放服務器上 不然 nuxt默認的那幾個JS會報錯 你就看不到效果了
要么你入口文件配置好
到這里就OK了，閑麻煩 你就直接從我開頭給的鏈接進去下下來demo 直接運行就好了。
另外，因為我這個案例 是 引入 scss 的寫法 ，如果你是寫在style的 要這么寫
<style lang="scss"> li { /*background: #fff;*/ background: nth($colour,6) } </style> 這里注意了 lang是 scss 不是sass
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
