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

Question

在我们项目的根文件夹中，我们有一个 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 文件导入变量？

Answer 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"

有效

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

Error importing variables from YAML file into SASS variables with Webpack Encore

yaml

sass

symfony

webpack

webpack-encore