使用webpack基于环境变量的SASS条件导入(在每个环境中使用不同的主题) [英] SASS conditional imports based on env variables using webpack (to use different themes per environment)

问题描述

对于我的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:

UPD to 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条件导入(在每个环境中使用不同的主题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！