Gulp-要将SCSS变量注入另一个文件中吗

更新--请参阅下面3月22日添加的其他信息…

我想用Gulp进程将一个SCSS变量注入到代码文件中

我认为这是两个步骤：

吞下SCSS _variables.SCSS文件，以便我可以访问该变量

只需简单地吞下一口。替换来替换字符串，然后放下 变量值放入我的文件（如答案）

我被困在第一步。这是我所拥有的。。。据我所知，这个没有大量文档记录的插件应该将变量从SCSS文件拉到argv对象中。因此，我按照插件页面上的示例进行了尝试：

gulp.task('test', function () {
    gulp.src('sass/*')
        .pipe(plugins.print())
        .pipe(plugins.sassVariables({
            $foundIt: argv.testSassVar
        }))

    console.log(argv);

});

调用

print（）

只是为了确认它正在读取我的SCSS文件（确实如此）。但是它在我的SCSS代码中找不到

$testSassVar

，您可以从这个错误消息中看到：

[12:53:04] Using gulpfile ~/dev/project/gulpfile.js
[12:53:04] Starting 'test'...
[12:53:04] 'test' errored after 15 ms
[12:53:04] ReferenceError: testSassVar is not defined
    at Gulp.<anonymous> (...)
[12:53:04] sass/_mixins.scss        <- this line and all below are from print()
[12:53:04] sass/_normalize.scss
[12:53:04] sass/_variables.scss
[12:53:04] sass/footer
[12:53:04] sass/header
[12:53:04] sass/landing
[12:53:04] sass/landing-style.scss
[12:53:04] sass/site
[12:53:04] sass/style.scss

有什么想法可以让我完成我想做的吗

---

3月22日编辑 看起来我可以通过走另一条路并使用插件部分实现这一点：

这会将一个文件写入

/tmp

，并将我的SCSS变量编译成JSON文件。然后我想，好吧，我可以在gulp中加载JSON文件并从那里解析它。不幸的是，此插件无法解析第二级变量（即引用变量的变量），因此您会得到如下结果：

 {
     # variables parsed from SCSS to JSON by gulp-sass-json

     # these are ok
     "font__main": "'Open Sans', sans-serif",
     "font__heading": "'Open Sans', sans-serif",
     "font__line-height-body": "1.5",
     "testSassVar": "123",
     "color__nbar": "#ffffff",
     "color__nbar_bg": "#50B107",
     "size_border-radius": "3px"

     # these variables reference other variables, not parsed, ouch
     "color__background-body": "$color__nbar",
     "color__background-screen": "$color__nbar",

     # and this is even worse, the SCSS function isn't parsed, double ouch
     "color_test": "lighten($color__nbar, 50%)",
 }

如您所见，简单引用其他变量的变量可能会通过一点Javascript来修复，只需对其进行解析，但一旦进入SASS函数，这种想法就不攻自破了

理想情况下，SCSS编译器可以解析非静态值的和变量。这是可能的（或者说是真的开始着手解决这个问题）

我唯一的另一个想法是将所有变量移动到一个JSON文件中，然后使用一个向另一个方向移动的gulp插件——JSON到SASS变量。但是，如果让SCSS编译器运行函数、解析变量等，然后将这些值返回给我的gulp文件，那么我就不会得到这样的好处

---

由于我的目标是使（已解析）变量中的SASS值可用于我的gulp文件，因此我可以将它们放在另一个（HTML或PHP）代码文件中，进行简单的字符串替换。如果有更简单的方法来实现我的最终目标，我洗耳恭听……

我最近也遇到了类似的问题，尽管我没有使用gulp

我搜索了可以完成这项任务的npm包（从SCS中提取变量），但我发现的这两个包都是不完美的

因此，我最终编写了自己的lib（）。 我们在生产中使用它，它是针对基础和一些其他常用用途进行测试的。 我真的不记得如何生成一个gulp插件了，但是这个库本身应该不难集成

在您的具体情况下，我会做如下操作：

var extractScssVariables = require('extract-scss-variables');
var variables = extractScssVariables({
  entryPoint: 'path/to/sass/style.scss',
  files: [
    'path/to/sass/_mixins.scss',
    'path/to/sass/_normalize.scss',
    'path/to/sass/_variables.scss',
  ],
  sassOptions: { 
    includePaths: ['path/to/libraries/to/include.scss'],
  },
});

其中，

入口点

是提取变量的上下文（例如，如果覆盖了在

\u mixins.scss

中声明的变量，则使用

入口点

的变量）

files

是从中提取SCSS变量的文件数组

---

和

sassOptions

是您已经在使用的任何命令行sass选项。

我最近遇到了类似的问题，尽管我没有使用gulp

我搜索了可以完成这项任务的npm包（从SCS中提取变量），但我发现的这两个包都是不完美的

因此，我最终编写了自己的lib（）。 我们在生产中使用它，它是针对基础和一些其他常用用途进行测试的。 我真的不记得如何生成一个gulp插件了，但是这个库本身应该不难集成

在您的具体情况下，我会做如下操作：

var extractScssVariables = require('extract-scss-variables');
var variables = extractScssVariables({
  entryPoint: 'path/to/sass/style.scss',
  files: [
    'path/to/sass/_mixins.scss',
    'path/to/sass/_normalize.scss',
    'path/to/sass/_variables.scss',
  ],
  sassOptions: { 
    includePaths: ['path/to/libraries/to/include.scss'],
  },
});

其中，

入口点

是提取变量的上下文（例如，如果覆盖了在

\u mixins.scss

中声明的变量，则使用

入口点

的变量）

files

是从中提取SCSS变量的文件数组

---

和

sassOptions

是您已经在使用的任何命令行sass选项。

我还为这种用例编写了一个库，它使用本机sass编译器功能提取调用的变量值，该变量值还附带了一个和，具体取决于用例

好处是它基于本机sass类型系统，因此支持各种sass功能，如函数、混合、列表、映射等。它还可以按预期处理导入、覆盖、默认值等

如果您愿意使用webpack，只需导入sass文件即可：

const style = require('sass-extract-loader!./style.scss'); 

提取变量，这是最简单的选择。否则，您可以直接使用核心库，如下所示：

const sassExtract = require('sass-extract');

sassExtract.render({
  file: 'path/to/my/styles.scss'
})
.then(rendered => {
  console.log(rendered.vars);
});

---

还有一个同步版本可用于与gulp管道集成。

我还为此类用例编写了一个库，该库使用本机sass编译器功能提取变量值，该变量值也随附和，具体取决于用例

好处是它基于本机sass类型系统，因此支持各种sass功能，如函数、混合、列表、映射等。它还可以按预期处理导入、覆盖、默认值等

如果您愿意使用webpack，只需导入sass文件即可：

const style = require('sass-extract-loader!./style.scss'); 

提取变量，这是最简单的选择。否则，您可以直接使用核心库，如下所示：

const sassExtract = require('sass-extract');

sassExtract.render({
  file: 'path/to/my/styles.scss'
})
.then(rendered => {
  console.log(rendered.vars);
});

---

还有一个同步版本，您可以使用它与gulp管道集成。

这是我的解决方案-您需要

gulp Injection

main.scss

文件

...
/* inject:scss */
/* endinject */
...

var gulpInject = require('gulp-inject');

...

gulp.src('...your/main/scss/file.scss')
.pipe(
    gulpInject(gulp.src('...your/partial/scss/**/*.scss'), {
        relative: true,
        transform: function (filePath) {
            var fileWithoutExtension = filePath.replace('.scss', '');
            return '@import \'' + fileWithoutExtension + '\';';
        }
    })
)
.pipe(...)
...

gulpfile.js

文件

...
/* inject:scss */
/* endinject */
...

var gulpInject = require('gulp-inject');

...

gulp.src('...your/main/scss/file.scss')
.pipe(
    gulpInject(gulp.src('...your/partial/scss/**/*.scss'), {
        relative: true,
        transform: function (filePath) {
            var fileWithoutExtension = filePath.replace('.scss', '');
            return '@import \'' + fileWithoutExtension + '\';';
        }
    })
)
.pipe(...)
...

上面的示例将部分SCSS文件注入到主SCSS文件中

---

希望我的代码会有帮助。

这是我的解决方案-你需要有

gulpinject