我想使用变量导入一个文件。
我的代码(不起作用):
$input-field-theme: default;
@import '#{$input-field-theme}';
错误信息: Error: 找不到或无法读取要导入的文件:#{$input-field-theme}
这个可以正常工作: @import 'default';
我想使用变量导入一个文件。
我的代码(不起作用):
$input-field-theme: default;
@import '#{$input-field-theme}';
错误信息: Error: 找不到或无法读取要导入的文件:#{$input-field-theme}
这个可以正常工作: @import 'default';
该线程还包括一个链接到另一个问题,其中包含2018年评论,讨论了动态依赖项的未来计划。允许动态导入将完全破坏Sass快速确定哪些文件导入其他文件,以及需要重新编译什么的能力。
@use
指令将提供导入文件作为mixin的功能,因此您可以动态地决定是否以及在哪里包含它。这将使Sass更符合其他可以在没有动态导入的情况下运行良好的语言,因为这意味着导入不再具有不可避免的副作用。
我们将添加一个load()
函数如上所述,它将允许样式表根据变量值在运行时加载文件。这将支持更复杂的用例,其中样式表需要根据用户输入进行加载,同时保留静态跟踪导入图和定义的mixin和函数的能力。@import { myFontFile } from "../some-path/right-here/this-folder/this-file.ttf";
然后在 @font-face{... url('data:font/truetype;charset=utf-8;base64, #{ myFontFile.readFile() }') }
中使用它。 - greensin@use
的示例,或者解释一下为什么不行呢? - jave.web另一种解决方案是,如果您使用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”。
Webpack
与SASS-LOADER
:https://webpack.js.org/loaders/sass-loader/#additionaldata我们可以在sass-loader
选项的prependData
属性中进行添加:
{
loader: 'sass-loader',
options: {
additionalData: '$env: ' + process.env.NODE_ENV + ';',
}
}
prependData
也可以是一个函数,它接收 loader-context
。祝好运...additionalData
而不是prependData
:https://dev59.com/GGYr5IYBdhLWcg3wM3f6#63491672 - Venryx