1、首先要安装一个插件
#如果安装不了就使用cnpm试一试
npm install @nuxtjs/style-resources --save
2、新建一个css变量的文件(比如:在assets/style/common.scss)
// 定义一些全局的样式变量
$site-theme-bg-color: #c60023;
3、在nuxt.config.js中进行配置
css: [
'~/assets/style/common.scss',
],
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
scss: '~/assets/style/common.scss'
},
4、在页面上使用,注意不要lang对scss的引用,否则不生效
#类似这个样子
<style lang="scss" scoped>
.label-text {
color:$site-theme-bg-color;
}
@media only screen and (max-width: 767px) {
.mobile-box {
// 暂时用于调试(等待该页面样式总调试)
width: r(390);
overflow: hidden;
}
}
</style>