1.安装sass

这里sass-loader一定要指定版本，不然就会默认安装最新的版本，就会报错（原因：webpack版本，nuxt版本问题不兼容）

npm install -D sass-loader@^10 sass

2.使用

2.1全局

如果scss文件要在全局使用的话需要在nuxt.config.js中引用一下，找到css模块

  css: ['~/static/css/reset.css',// 配置全局scss{src:"~/static/css/common.scss",lang:"scss"}],

2.2页面

在页面中使用，需要设置一下

<style lang='scss' scoped>
</style>

2.3设置全局变量（@nuxtjs/style-resources）

在项目中会用到一些重复的属性，比如颜色，字体大小什么的，就可以通过设置全局变量
注意⚠️：设置完变量后一定要加;

$title_color:#a1a1a1;

现在在页面中还是不能使用的，还需要一个插件@nuxtjs/style-resources

npm i @nuxtjs/style-resources -D

在nuxt.config.js中配置

modules: [// https://go.nuxtjs.dev/axios'@nuxtjs/axios',// 添加设置scss变量的插件'@nuxtjs/style-resources'
],
// 手动配置@nuxtjs/style-resources
styleResources:{scss:[// 在这里不能使用路径别名 ～ 和 @'./static/css/common.scss']
},

在页面中就可以使用啦

p{color:$title_color;
}

在nuxt中使用sass相关推荐

3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
Vue2.0项目中使用sass(踩坑之路)
今天用2.0创建项目的时候,使用scss一直不成功,一直报错------ 记录一下,防止下次踩坑 1.安装依赖包 vue的webpack项目中需要安装上node-sass.sass-loader和st ...
Linux路由界面设置,nuxt中如何配置页面路由
nuxt中如何配置页面路由发布时间:2020-11-06 15:16:34 来源:亿速云阅读:248 作者:Leah 今天就跟大家聊聊有关nuxt中如何配置页面路由,可能很多人都不太了解,为了让大 ...
Nuxt中如何使用Vuex-Store异步获取数据
Nuxt是一个基于Vue.js的通用型框架,它集成了使用Vue开发的绝大数组件/框架. 长话短说如何在Vuex-store中获取异步数据呢? 在Nuxt中由于集合了Vuex还有其他的一些配置,大大的方 ...
sass webpack_如何在Visual Studio和Webpack中编译Sass文件
sass webpack Sass is a very popular CSS pre-processor. The intent of this tutorial is to show you ho ...
在webstorm中配置sass的自动编译，并且可以指定编译后的css的目录.
参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing 链接:https://www.jianshu.com/p/0fe52f149cab ...
vuex获取php数据,Nuxt中如何使用Vuex-Store异步获取数据
Nuxt持发秀事应差互过来商类如处.,到图近就这是一个基于Vue.js的通用型框架,它集成了使用Vue开发的绝大数组件/框架到二新,为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分 ...
nuxt中图片预加载
使用原理使用动态创建标签的方式提前加载好图片到本地 nuxt中因为是服务器渲染没有new Image() 对象所以加上标签表示客户端渲染 preloadImg() {this.$nextTic ...
记一次在nuxt中使用generate批量生成静态站点页面
做过seo的同学都知道,一些不是实时变化的页面(比如一个星期更新一次内容)我们可以生成静态的站点去让爬虫去爬去,这样就无需一次次地调用接口了. 那么在nuxt中我们怎么去做呢? nuxt为我们提供了一 ...

在nuxt中使用sass

文章目录