我的sass变量into:root没有内插
我对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是我找出此问题的方法。
相关文章