使用 Webpack Encore 将 YAML 文件中的变量导入 SASS 变量时出错答案

【问题标题】：Error importing variables from YAML file into SASS variables with Webpack Encore使用 Webpack Encore 将 YAML 文件中的变量导入 SASS 变量时出错
【发布时间】：2021-01-08 07:20:23
【问题描述】：

在我们项目的根文件夹中，我们有一个 styleguide.yml 文件（包含例如颜色定义）。它应该在 Symfony Twig 扩展以及 SASS 和 JavaScript 中加载（应该有一个中心位置来定义例如颜色）。

我已经尝试将 node-sass-yaml-importer 包添加到 package.json：

  "dependencies": {
    "node-sass-yaml-importer": "^4.0.1",
  },

在 webpack.config.js 我做：

// enables Sass/SCSS support
.enableSassLoader()

// enable autoprefixer and stuff
.enablePostCssLoader((options) => {
     options.config = {
             // the directory where the postcss.config.js file is stored
             path: './'
     };
})

.addLoader({
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1
            },
        },
        {
            loader: 'sass-loader',
            // Apply the YAML importer via sass-loader's options.
            options: {
                importer: 'node-sass-yaml-importer'
            },
        },
    ],
})

在执行yarn encore dev 时出现以下错误：

 error  in ./assets/sass/main.scss

SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of assets/sass/main.scss
>> var api = require("!../../node_modules/style-loader/dist/runtime/injectStyle
   ^

是不是因为我错误地使用了 addLoader 方法？如何使用 Webpack Encore 从 .yml 文件中导入变量？

【问题讨论】：

标签： symfony webpack sass yaml webpack-encore

【解决方案1】：

经过一番试验，我找到了解决方案。在 webpack.config.js 中做：

var yamlImporter = require('node-sass-yaml-importer');

Encore
    // enables Sass/SCSS support
    .enableSassLoader((options) => {
        options.sassOptions = {
            importer: yamlImporter
        };
    }, {})

    // ...

在 main.scss 中：

@import "../../styleguide.yml"

工作?

【讨论】：