nuxt.js中配置使用sass(scss)方法详解

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

nuxt.js是基于 Vue.js 的轻量级应用框架,那么在该框架的应用中我们使用CSS预处理器。如sass\scss要如何使用呢?

结果如图:


安装scss\sass:

npm install --save-dev node-sass sass-loader

关于scss、sass两种使用场景。

1、使用import引入外部公用scss

2、直接在style中使用scss

场景一:(使用import方式引入)

1、在assets文件夹中创建scss文件,如图:


2、在应用页面通过import引入

<template>
<div class="container">
<div>
<Logo></Logo>
<h1 class="title">
六月初博客站
</h1>
<h4 class="subtitle">
六月初博客站,是一个记录自己生活点滴、互联网技术的原创独立博客。
</h4>
</div>
</div>
</template>

<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo
},
head(){
return {
title:'ceshi'
}
}
}
</script>
<style lang="scss">
@import '../assets/css/base.scss';
</style>

场景二:直接在style中使用

<template>
<div class="container">
<div>
<Logo></Logo>
<h1 class="title">
六月初博客站
</h1>
<h4 class="subtitle">
六月初博客站,是一个记录自己生活点滴、互联网技术的原创独立博客。
</h4>
</div>
</div>
</template>

<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo
},
head(){
return {
title:'ceshi'
}
}
}
</script>

<style lang="scss">
.container{
text-align: center;
h1{
color: #f00;
}
}
</style>

应用场景汇总:通常我们对于一些公用的样式或基础样式会使用import方式引入,而对于一些在特定页面中才会应用的方式建议直接在页面的style中使用。按照这种原理汇总的信息,会使我们的代码更便于管理和查找!