Как я могу использовать переменные среды в файлах node-sass .s css? - PullRequest
Новая
       102

Как я могу использовать переменные среды в файлах node-sass .s css?

2 голосов
/ 05 мая 2020

Я хочу, чтобы настраиваемая цветовая переменная по умолчанию сохранялась в файле .env. Например, мне нужен файл .env, содержащий 

PRIMARY=red

, и файл _variables.scss, содержащий 

$primary: ${process.env.PRIMARY}

, и файл S CSS, содержащий 

.my-class { color: $primary; }

И компоненты, в которых я использую таблицы стилей, содержащие 

import './MyComponent.scss';

Возможно ли это? Если нет, то какие альтернативы у меня есть?

  • node v12.13.1
  • node-sass v4.13.1

1 Ответ

3 голосов
/ 10 мая 2020

Предполагая, что вы используете webpack и sass-loader (вам нужно будет извлечь, что, я думаю, того стоит, если вы не возражаете против дополнительных файлов и дополнительного обновления зависимостей), измените свой файл webpack.config. js, например это: 

const { castToSass } = require('node-sass-utils');

module.exports = {
...
  {
    test: /\.scss$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "sass-loader"
        options: {
          functions: {
            "env($variable)": variable => castToSass(process.env[variable]);
          }
        }
    }]
  }

Теперь вы можете создать файл _variables.scss следующим образом: 

$primary: env('primary');

Если это не сработает или вам нужно больше гибкости, проверьте В статье я взял за основу и не стесняйтесь редактировать свой ответ.

...