我的sass变量into：root没有内插 [英] My SASS variables into :root are not interpolated

问题描述

我对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个文件？

推荐答案

您需要在:root范围内对变量进行如下--thm-font: #{$primaryTypography};插值。
不确定此行为的原因，但this answer是我找出此问题的方法。

这篇关于我的sass变量into：root没有内插的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！