问题描述
对于我的Vue网站项目,该项目使用一个样式表,该样式表是使用SASS的Webpack生成的,我想要:
For my Vue website project using a single style sheet generated using Webpack from SASS I want to have:
基于环境变量的有条件的SASS导入
示例设置:
.env
:例如,如果我有一个包含以下内容的环境:
.env
: So for instance if I have an env containing:
SASS_THEME="soft"
soft.scss
:一个包含以下内容的SASS主题文件:
soft.scss
: A SASS theme file containing something like:
$color-alpha: #e5e5e5;
main.scss
:一个主要的sass文件,看起来像这样:
main.scss
: A main sass file looking something like:
// Import theme variables here
@import '${SASS_THEME}';
body{
background: $color-alpha;
}
推荐答案
您可以使用webpack别名.它应该是带有主题的文件的路径.
You can use webpack aliases. It should be a path to the file with theme.
const env = require('./.env');
...
const theme = getThemeFromEnv(env); // you need to implement this method
...
resolve: {
alias: {
@SASS_THEME: theme
}
}
然后在scss文件中使用它:
and then use it in scss file:
// Import theme variables here
@import '@SASS_THEME';
body{
background: $color-alpha;
}
UPD要加载.env文件,请使用raw-loader:
UPDto load .env file use raw-loader:
rules: [
{
test: /\.env$/,
use: 'raw-loader',
},
],
它将加载任何内容作为原始字符串
it will load anything as raw string
UPD2
我已经知道如何使用dotenv
软件包加载.env
UPD2
I've got it how to load .env
with dotenv
package
const dotenv = require('dotenv').config({path: __dirname + '/.env'});
console.log(dotenv.parsed) // output { SASS_THEME: 'soft' }
这篇关于使用webpack基于环境变量的SASS条件导入(在每个环境中使用不同的主题)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!