恩，经过朋友的帮助搞定的，因为 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里面是我之前的配置 直接复制过来的 ，但是不碍事，照着做）
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","pug": "^2.0.0-beta6","pug-loader": "^2.3.0","sass-loader": "^6.0.6"
}
}
运行代码
这个是给你本地调试的 亲测 可以用 你会发现 我重复引用了 sass 这是因为 第二行 是官网给的， 我怕你更新失败了，所以让你在从淘宝更新一遍
css-loader sass-resources-loader style-loader css-loader
npm run dev//运行
好 到这里没了，调试是没问题了，如果你要打包成文件
效果了
要么你入口文件配置好
到这里就OK了，闲麻烦 你就直接从我开头给的链接进去下下来demo 直接运行就好了。
另外，因为我这个案例 是 引入 scss 的写法 ，如果你是写在style的 要这么写
这里注意了 lang是 scss 不是sass
原文链接：https://www.f2er.com/js/31778.html