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

问题描述

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

解决方法

经过一些实验后，我找到了解决方案。在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"

Works?