详解nuxt sass全局变量(公共scss解决方案)

前端之家收集整理的这篇文章主要介绍了详解nuxt sass全局变量(公共scss解决方案)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

恩,经过朋友的帮助搞定的,因为 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)
}
})

},}
}

第四 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章