Можно ли ввести параметр NODE_ENV в файл sass, используя Webpack & sass loader?

Question

Я пытаюсь внедрить NODE_ENV в файл sass, чтобы у меня был другой вывод для dev/prod env, и у меня была функция sass с таким условием:@if (NODE_ENV == 'prod') {}

мой webpack.config выглядит так:

module: {
    loaders: [{
        test: /\.scss$/,
        loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
    }]
}

Я попытался передать параметр данных загрузчику, но все, что я пытался, сработало. буду признателен за любую помощь!

Answer 1

Это код непосредственно из репозитория sass-loader.

webpack.config.js

... sassLoader: { data: "$env: " + process.env.NODE_ENV + ";" } ...

Answer 2

Вы можете попробовать prependData вариант для sass-loader

{
  loader: 'sass-loader',
  options: {
    prependData: '$env: ' + process.env.NODE_ENV + ';',
  }
}

prependData также принимает function который получает loaderContextс помощью которого вы можете сделать его более динамичным. Как только вы это реализовали; Вы можете:

@if ($env == 'prod') {}

Дополнительная информация здесь: https://webpack.js.org/loaders/sass-loader/

Удачи...

Answer 3

Взглянул на sass-loader источник, и он, кажется, не поддерживает какие-либо параметры, которые позволят вам вставить переменную - так что это будет невозможно.

Я не думаю, что вы сможете "вставить" переменную env/build-time в ваш Sass, как это, но вы можете получить такое же поведение, создав несколько файлов Sass и требуя тот, который вам нужен (из вашего js-источника).) на основе условия. Обратите внимание, что веб-пакет имеет ограниченные возможности для анализа логики в вашем коде, однако - если вы хотите require что-то внутри условного, условное должно проверять логическое значение, чтобы оно работало. Так что если вы делаете if (NODE_ENV === 'production') {...} else {...} Webpack будет обрабатывать все требования при всех этих условиях. Если вы сделали что-то вроде if (IS_PROD_ENV) {...} else {...}где условное значение является логическим, webpack будет следовать условной логике и обрабатывать только правильные require, UglifyJS Плагин удалит ненужные вам условные ветки.