将 json 数据作为 .scss 文件中的 sass 变量导入 Nuxt

Question

我正在尝试在 scss 文件中导入 json 变量，以便我可以在 1 个地方定义它们，然后在 scss 和 js 中使用它们。 应用是vue/nuxt

尝试了很多变种，但都没有成功

这是我的代码

src/assets/scss/test.json

{
  "danger": "#cc3333",
  "info": "#3399ff",
  "success": "#33cc99",
  "warning": "#ffcc00"
}

src/assets/scss/main.scss

@import "./test.json";

body {
  background-color: $info;
}

nuxt.config.js

const jsonImporter = require('node-sass-json-importer');

module.exports = {

  css: [
    '@/assets/scss/main.scss',
  ],
  ...
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      ctx.loaders.sass.sassOptions.importer = jsonImporter
      console.log(ctx.loaders.sass.sassOptions)
    }
  }
}

给我错误

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                  friendly-errors 17:22:43  
SassError: Invalid CSS after "{": expected 1 selector or at-rule, was "{"
        on line 1 of assets/scss/test.json
        from line 1 of C:\Users\Fluksikarton\Desktop\nuxt-webserotonin-template\assets\scss\main.scss
>> {





extend (config, ctx) {
      console.log(ctx.loaders.scss)
      ctx.loaders.scss.scssOptions = {};
      ctx.loaders.scss.scssOptions.importer = jsonImporter()
    }

给

ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'importer'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

Answer 1

node-sass-json-importer 的默认导出是工厂函数，而不是导入器本身。

另外你使用的是 SCSS 而不是 SASS ....

改成这样：ctx.loaders.scss.sassOptions.importer = jsonImporter()