使用变量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

目前无法进行此操作，请查看此link以获取更多信息。

Answer 2

替代解决方案是，如果您使用Gulp编译SASS文件，则需要在配置中引入 includePaths 。然后，一旦从文件夹导入任何模块，它就会考虑查看您在“includePaths”中已经引入的路径。 例）

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

我们可以在prependData选项的sass-loader属性中添加：

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

注意：prependData也可以是function，它接收loader-context。

祝你好运...