如何在 Nuxt 上的 scss 文件中从 env 导入颜色变量
How to import a color variable from env in a scss file on Nuxt
我在 Nuxt 2.13 上使用 sass-loader 8.0.2
我想从 colors.scss
中的 .env 文件中导入一组颜色
我设法导入它们并使用这些代码分配给变量:
我的 .env 文件:
THEME_BODY_COLOR = #FAFAFA
THEME_MAIN_COLOR = #0D2C54
THEME_MAIN_COLOR2 = #ff3366
THEME_SIDE_COLOR = #1a1b41
THEME_SIDE_COLOR2 = #0D2C54
THEME_LINK_COLOR = #673ab7
我的nuxt.config.js
build: {
transpile: ['vee-validate/dist/rules'],
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
jQuery: "jquery",
"window.jQuery": "jquery",
'_': 'lodash'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
postcss: {
preset: {
features: {
customProperties: false,
},
},
},
loaders: {
scss: {
prependData: `$theme_colors: ("theme_body_color":"${process.env.THEME_BODY_COLOR}","theme_main_color":"${process.env.THEME_MAIN_COLOR}","theme_main_color2":"${process.env.THEME_MAIN_COLOR2}","theme_side_color":"${process.env.THEME_SIDE_COLOR}","theme_side_color2":"${process.env.THEME_SIDE_COLOR2}","theme_link_color":"${process.env.THEME_LINK_COLOR}");`
}
},
}
我的colors.scss文件:
@use "sass:string";
$theme_body_color: unquote(map-get($theme_colors, "theme_body_color"));
$theme_main_color: unquote(map-get($theme_colors, "theme_main_color"));
$theme_main_color2: unquote(map-get($theme_colors, "theme_main_color2"));
$theme_side_color: unquote(map-get($theme_colors, "theme_side_color"));
$theme_side_color2: unquote(map-get($theme_colors, "theme_side_color2"));
$theme_link_color: unquote(map-get($theme_colors, "theme_link_color"));
color: $theme_link_color
没有问题,但是 color: rgba($theme_link_color, .9)
给我以下错误:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 22:47:11
SassError: argument `$color` of `rgba($color, $alpha)` must be a color
on line 18 of assets/scss/colors.scss, in function `rgba`
from line 18 of assets/scss/colors.scss
from line 125 of C:\CODES\myproject\components\global\mycomp.vue
>> @debug rgba($theme_link_color, 0.2);
是什么原因导致这个问题,我该如何解决?
我花了一段时间才找到答案,问题是我的方法!!
我不知道如何插入多个变量,所以我创建了一个数组,这导致了问题。所以答案:
对于 sass-loader < 7.x
build: {
loaders: {
scss: {
data: `
$theme_body_color:${process.env.THEME_BODY_COLOR};
$theme_main_color:${process.env.THEME_MAIN_COLOR};
$theme_main_color2:${process.env.THEME_MAIN_COLOR2};
$theme_side_color:${process.env.THEME_SIDE_COLOR};
$theme_side_color2:${process.env.THEME_SIDE_COLOR2};
$theme_link_color:${process.env.THEME_LINK_COLOR};
`
}
},
}
对于 sass-loader 8.x
build: {
loaders: {
scss: {
prependData: `
$theme_body_color:${process.env.THEME_BODY_COLOR};
$theme_main_color:${process.env.THEME_MAIN_COLOR};
$theme_main_color2:${process.env.THEME_MAIN_COLOR2};
$theme_side_color:${process.env.THEME_SIDE_COLOR};
$theme_side_color2:${process.env.THEME_SIDE_COLOR2};
$theme_link_color:${process.env.THEME_LINK_COLOR};
`
}
},
}
对于 sass-loader > 9.x
build: {
loaders: {
scss: {
additionalData: `
$theme_body_color:${process.env.THEME_BODY_COLOR};
$theme_main_color:${process.env.THEME_MAIN_COLOR};
$theme_main_color2:${process.env.THEME_MAIN_COLOR2};
$theme_side_color:${process.env.THEME_SIDE_COLOR};
$theme_side_color2:${process.env.THEME_SIDE_COLOR2};
$theme_link_color:${process.env.THEME_LINK_COLOR};
`
}
},
}
就是这样!!无需做任何其他事情!变量被添加到所有 scss 文件中。
我在 Nuxt 2.13 上使用 sass-loader 8.0.2
我想从 colors.scss
中的 .env 文件中导入一组颜色我设法导入它们并使用这些代码分配给变量:
我的 .env 文件:
THEME_BODY_COLOR = #FAFAFA
THEME_MAIN_COLOR = #0D2C54
THEME_MAIN_COLOR2 = #ff3366
THEME_SIDE_COLOR = #1a1b41
THEME_SIDE_COLOR2 = #0D2C54
THEME_LINK_COLOR = #673ab7
我的nuxt.config.js
build: {
transpile: ['vee-validate/dist/rules'],
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
jQuery: "jquery",
"window.jQuery": "jquery",
'_': 'lodash'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
postcss: {
preset: {
features: {
customProperties: false,
},
},
},
loaders: {
scss: {
prependData: `$theme_colors: ("theme_body_color":"${process.env.THEME_BODY_COLOR}","theme_main_color":"${process.env.THEME_MAIN_COLOR}","theme_main_color2":"${process.env.THEME_MAIN_COLOR2}","theme_side_color":"${process.env.THEME_SIDE_COLOR}","theme_side_color2":"${process.env.THEME_SIDE_COLOR2}","theme_link_color":"${process.env.THEME_LINK_COLOR}");`
}
},
}
我的colors.scss文件:
@use "sass:string";
$theme_body_color: unquote(map-get($theme_colors, "theme_body_color"));
$theme_main_color: unquote(map-get($theme_colors, "theme_main_color"));
$theme_main_color2: unquote(map-get($theme_colors, "theme_main_color2"));
$theme_side_color: unquote(map-get($theme_colors, "theme_side_color"));
$theme_side_color2: unquote(map-get($theme_colors, "theme_side_color2"));
$theme_link_color: unquote(map-get($theme_colors, "theme_link_color"));
color: $theme_link_color
没有问题,但是 color: rgba($theme_link_color, .9)
给我以下错误:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 22:47:11
SassError: argument `$color` of `rgba($color, $alpha)` must be a color
on line 18 of assets/scss/colors.scss, in function `rgba`
from line 18 of assets/scss/colors.scss
from line 125 of C:\CODES\myproject\components\global\mycomp.vue
>> @debug rgba($theme_link_color, 0.2);
是什么原因导致这个问题,我该如何解决?
我花了一段时间才找到答案,问题是我的方法!!
我不知道如何插入多个变量,所以我创建了一个数组,这导致了问题。所以答案:
对于 sass-loader < 7.x
build: {
loaders: {
scss: {
data: `
$theme_body_color:${process.env.THEME_BODY_COLOR};
$theme_main_color:${process.env.THEME_MAIN_COLOR};
$theme_main_color2:${process.env.THEME_MAIN_COLOR2};
$theme_side_color:${process.env.THEME_SIDE_COLOR};
$theme_side_color2:${process.env.THEME_SIDE_COLOR2};
$theme_link_color:${process.env.THEME_LINK_COLOR};
`
}
},
}
对于 sass-loader 8.x
build: {
loaders: {
scss: {
prependData: `
$theme_body_color:${process.env.THEME_BODY_COLOR};
$theme_main_color:${process.env.THEME_MAIN_COLOR};
$theme_main_color2:${process.env.THEME_MAIN_COLOR2};
$theme_side_color:${process.env.THEME_SIDE_COLOR};
$theme_side_color2:${process.env.THEME_SIDE_COLOR2};
$theme_link_color:${process.env.THEME_LINK_COLOR};
`
}
},
}
对于 sass-loader > 9.x
build: {
loaders: {
scss: {
additionalData: `
$theme_body_color:${process.env.THEME_BODY_COLOR};
$theme_main_color:${process.env.THEME_MAIN_COLOR};
$theme_main_color2:${process.env.THEME_MAIN_COLOR2};
$theme_side_color:${process.env.THEME_SIDE_COLOR};
$theme_side_color2:${process.env.THEME_SIDE_COLOR2};
$theme_link_color:${process.env.THEME_LINK_COLOR};
`
}
},
}
就是这样!!无需做任何其他事情!变量被添加到所有 scss 文件中。