Импортировать путь, используя переменную SASS

Question

Я хотел бы импортировать файл, используя переменные.

Мой код (это не работает):

$input-field-theme: default;
@import '#{$input-field-theme}';

Сообщение об ошибке: Error: File to import not found or unreadable: #{$input-field-theme}

И это работает: @import 'default';

Answer 1

На данный момент это невозможно, проверьте эту ссылку для получения дополнительной информации.

Answer 2

Альтернативное решение: если вы использовали Gulp для компиляции файла SASS, вам необходимо ввести includePaths в конфигурацию. Затем, когда вы импортируете какой-либо модуль из папки, он рассматривает поиск путей, которые вы ввели уже в "includePaths". Ex)

gulp.task(`compileSASS`, function () {
   return gulp.src(`styles/main.scss`)
    .pipe(sass({
        outputStyle: `expanded`,
        precision: 10,
        includePaths: [
            '../../../feature',
            '../../..',
        ]    
    })
    .pipe(gulp.dest(`temp/styles`));
    });

Теперь, когда вы настроили свой код, вы можете импортировать файлы по разным путям:

 @import "promotion/code/styles/_promotion.scss";

Чтобы импортировать этот файл, он будет смотреть на все "includePaths".

Answer 3

Webpack с SASS-LOADER: https://webpack.js.org/loaders/sass-loader/

Мы можем добавить к prependData собственность sass-loader параметры:

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

Примечание: prependData может быть function тоже который получает loader-context.

Удачи...