nuxt、vue 中使用 scss 做预编译 /deep/ expected selector 报错解决办法

Posted 2023-03-24

参考技术A

在 scss 中， >>> 不起作用。

以前做项目的时候，用 /deep/ 进行穿透都是成功的，但是，在 nuxt 中，使用却报错：

于是我尝试用 ::v-deep 替换 /deep/ ，成功解决了问题。

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

【中文标题】将 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 架构不匹配的选项对象进行初始化。