在Nuxt中使用scss语法

安装插件

npm i -D node-sass sass-loader 

Sass基础语法说明

基础用法

单页面使用

注意：一定要写上lang="scss"才可以使用scss语法

<style lang="scss" scoped>
/*定义变量*/
$base-color: red;

div.border{
	/*使用变量*/
	border: 1px solid $base-color;
}
</style>

全局样式

定义全局样式

在assets目录下添加文件：my-global.scss

$base-color: red;
.my-btn{
	border: 1px solid $base-color;
}

修改配置nuxt.config.js

  css: [
	//以下两种引入方式都可以
    { src: '~/assets/my-global.scss', lang: 'scss' },
	'~/assets/my-global.scss',
    ......
  ]

页面使用

<template>
	......
	<!--这里可以使用样式:my-btn -->
	<input type="text" class="my-btn" value="添加">
	......
</template>
<style scoped lang="scss">
div{
	/*注意，这里使用my-global.scss中定义的变量$base-color会报错*/
	border: 1px solid $base-color;
}
</style>

问题&解决方案

问题描述

在页面中不能使用全局定义的scss变量

解决方法

安装插件

没错，又是插件。

npm i -D @nuxtjs/style-resources

修改配置

修改nuxt.config.js文件，添加内容
这里配置，采用的是nuxt 2.0.0版本

modules: [
    '@nuxtjs/style-resources'
],
styleResources: {
    scss: [
    	//把全局样式放到这里，同时把css节点中引用的scss删除
        '~assets/my-global.scss'
    ]
},

在使用nuxt的2.14.12及以上版本时，配置有不同

//主要就是这里改为了buildModules
buildModules: [
    '@nuxtjs/style-resources'
],
styleResources: {
    scss: [
        '@/assets/my-global.scss'
    ]
},

这样就可以在页面中使用全局scss中定义的变量了。

注意，页面的style标签中一定要添加lang="scss"属性。