我的 SASS 变量进入 :root 时没有进行插值

Question

我对 Nuxt 生态系统相当陌生。很棒的套餐，让我们的生活变得更加轻松。

我正在尝试添加sass到我的项目中。按照文档进行操作后，我的构建运行完美，但我的scss文件没有被编译。问题的一个例子：

请注意，它--thm-font被设置为$primaryTypography而不是来自 的实际值.scss。

我期待着看到--thm-font: 'Barlow', sans-serif。我假设sass没有被编译。需要注意的是，我并不是在寻找组件基础样式，而是试图找到一个main.scss导入组件、布局和许多其他样式的位置。

_变量.scss

// Base colors
$base: #ee464b;
$baseRgb: (238, 70, 75);
$black: #272839;
$blackRgb: (39, 40, 57);
$grey: #f4f4f8;

// Typography
$primaryTypography: 'Barlow', sans-serif;

@debug $primaryTypography; // -> this one outputs the correct value

:root {
  --thm-font: $primaryTypography;
  --thm-base: $base;
  --thm-base-rgb: $baseRgb;
  --thm-black: $black;
  --thm-black-rgb: $blackRgb;
  --thm-gray: $grey;
}

nuxt.config.js

export default {
  mode: 'universal',
  loading: { color: '#fff' },
  css: [
    '~assets/scss/main.scss'
  ],
  plugins: [
  ],
  buildModules: [
  ],
  modules: [
  ],
  optimizedImages: {
    optimizeImages: true
  },
  build: {
    extend (config, ctx) {
    },
    loaders: {
      sass: {
        prependData: '@import "~@/assets/scss/main.scss";'
      }
    }
  },
  server: {
    port: process.env.APP_PORT
  }
}

包.json

{
  "name": "zimed",
  "version": "1.1.0",
  "description": "Zimed - Vue Nuxt App Landing Page Template",
  "author": "Layerdrops",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@bazzite/nuxt-optimized-images": "^0.3.0",
    "nuxt": "^2.0.0",
    "sass-loader": "10"
  },
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.38.2"
  }
}

我缺少哪个配置来.scss编译文件？

Answer 1

--thm-font: #{$primaryTypography};您需要在 的范围内像这样插入变量:root。
不确定这种行为的原因，但这个答案是我找出答案的方式。