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

Posted

技术标签:

【中文标题】将 json 数据作为 .scss 文件中的 sass 变量导入 Nuxt【英文标题】:Import json data as sass variables in an .scss file Nuxt 【发布时间】:2020-04-01 07:03:22 【问题描述】:

我正在尝试在 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? 

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

啊,是的,但我扩展 webpack 配置的方式似乎仍然不是正确的方式。改了还是一样的错误 你使用的是什么版本的sass-loader "sass-loader": "^8.0.0" 实际上有 2 个加载器 - 一个用于sass,一个用于scss。更新了我的答案... ctx.loaders.scss.scssOptions = ; ctx.loaders.scss.scssOptions.importer = jsonImporter() 它给了我 ValidationError: Invalid options object。 Sass Loader 已使用与 API 架构不匹配的选项对象进行初始化。

以上是关于将 json 数据作为 .scss 文件中的 sass 变量导入 Nuxt的主要内容,如果未能解决你的问题,请参考以下文章

仅使用 Angular 7 将 json 数据写入本地 JSON 文件

即使在 angular.json 中有正确的路径,Angular 也会显示样式 scss 错误

如何将 Thingsboard 中的时间序列数据作为 CSV 或 JSON 文件保存到外部文件系统? [关闭]

使用 Parcel、SASS 和 TypeScript 将 SCSS 文件作为 CSS 字符串导入

在 Angular 6+ (styleExt) 中使用 scss 作为默认样式表

汇编语言 [BX]和loop指令