我的 SASS 变量到 :root 没有被插值答案

【问题标题】：My SASS variables into :root are not interpolated我的 SASS 变量到 :root 没有被插值
【发布时间】：2021-10-29 07:58:18
【问题描述】：

我对 Nuxt 生态系统还很陌生。很棒的包，让我们的生活更轻松。

我正在尝试将sass 添加到我的项目中。在遵循documentation 之后，我的构建运行完美，但我的scss 文件没有被编译。问题示例：

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

我期待看到--thm-font: 'Barlow', sans-serif。我假设 sass 没有被编译。请务必注意，我不是在寻找组件基础样式，而是在尝试使用 main.scss，我将在其中导入组件、布局和许多其他样式。

_variables.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
  }
}

package.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 文件？

【问题讨论】：

您可以在这里尝试解决方案吗：stackoverflow.com/a/68730454/8816585？
顺便说一句 mode: 'universal' 已弃用：stackoverflow.com/a/68272664/8816585
@kissu 添加body { background-color: $black; } 有效。我猜 sass 不理解 :root 内部的变量扩展？！
@kissu 随时回答问题，以便我接受您的回答。你的想法让我找到了解决方案:)
@null 伪类 :root 对 SASS/SCSS 如何解析变量没有影响。但是对于像--foo 这样的css 自定义属性，任何值都是有效值，因此$some-color 是--foo 的有效字符串值。因此显式字符串插值必须与--foo: #{$some-color}; 一起使用

标签： css sass nuxt.js

【解决方案1】：

你需要在:root的范围内插入像--thm-font: #{$primaryTypography};这样的变量。
不知道为什么会出现这种行为，但this answer 是我发现这一点的方法。

【讨论】：