恩,经过朋友的帮助搞定的,因为 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]