恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢 “包子”的帮助
注意 本案例 只是把你通用 的 比如
以上这种通用的变量抽出来，方便你在其他scss的样式里面调用
比如
只存储变量，别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法
案例里面有运行说明
我建议你还是跟我一步一步来走，比较刻骨铭心
第一步新建文件夹 assets然后新建两个scss文件 a1.scss cyc.scss
a1.scss
cyc.scss
第二 新建 pages/index.vue
- 1232323231
- 你好是多少打算的
第三 nuxt.config.js
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)
}
})
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里面是我之前的配置 直接复制过来的 ，但是不碍事，照着做）
运行代码
这个是给你本地调试的 亲测 可以用 你会发现 我重复引用了 sass 这是因为 第二行 是官网给的， 我怕你更新失败了，所以让你在从淘宝更新一遍
好 到这里没了，调试是没问题了，如果你要打包成文件
要么你入口文件配置好
到这里就OK了，闲麻烦 你就直接从我开头给的链接进去下下来demo 直接运行就好了。
另外，因为我这个案例 是 引入 scss 的写法 ，如果你是写在style的 要这么写
这里注意了 lang是 scss 不是sass
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。