时间戳

首页 > 解决方案 > 如何在我的 Nuxt 项目中全局使用 sass？

vue.js - 如何在我的 Nuxt 项目中全局使用 sass？

问题描述

我有一个 Vue.js 组件，我想从我的 scss 文件中访问我的 sass 变量。在 NUXT 文档https://nuxtjs.org/faq/pre-processors/上，它说您可以使用 node sass 和 sass-loader 来执行此操作。所以我安装了这两个，它们在我的 package.json 中的 dev 依赖项下。

之后，我将以下内容添加到我的 nuxt.config.js

  css: [
    '@/assets/sass/main.scss'
  ],

但是当我尝试在我的一个组件中执行此操作时

<style lang="scss">
html, body{
    background-color: $background-color;
    overflow: hidden;
}
</style>

我收到 $background 颜色未定义的错误？为什么会这样？

我的 main.scss 位于 assets/sass

$text-color:#FFFFFF;
$background-color: #FFFFFF;
$primary-color: #1F2338;
$secondary-color: #F73455;

$navigation-opacity: 0.70;

标签： vue.jssassnuxt.js

解决方案

推荐阅读