将 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 字符串导入