前端 scss文件报错 Base-level rules cannot contain the parent-selector-referencing character ‘&’. 解决办法

报错的地方 [data-theme=#{$themes-key}] &

1
2
3
4
5
6
7
8
@mixin theme($themes) {
  @each $themes-key, $themes-map in $themes {
    $themes-map: $themes-map !global;
    [data-theme=#{$themes-key}] & {
      @content;
    }
  }
}

修正后

1
2
3
4
5
6
7
8
@mixin theme($themes) {
  @each $themes-key, $themes-map in $themes {
    $themes-map: $themes-map !global;
    [data-theme=#{$themes-key}] #{if(&, "&", "*")} {
      @content;
    }
  }
}

sass_loader有关prependData不同版本的写法

报错信息

1
2
3
Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'additionaData'. These properties are valid:
   object { implementation?, api?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }

根据错误提示翻译描述:
语法错误：验证错误：选项对象无效。已使用与API架构不匹配的options对象初始化Sass加载程序。
-选项具有未知属性“附加数据”。这些属性是有效的：
object{implementation？，api？，sassOptions？，additionalData？，sourceMap？，webpackImporter？，warnRuleAsWarning？}

根据错误描述提示语法书写问题，翻阅资料后，发现各个版本下options选项写法各有不同!

sass-locader的版本不同，additionaData也会不同

  1. sass-loader:v10 以上就用：additionaData
  2. sass-loader:v8 以上就用：prependData
  3. sass-loader:v8 -以下就用：data
1
2
3
4
5
6
7
css: {
  loaderOptions: {
      sass: {
        additionalData: `@import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";`,
      },
    },
},

以上配置版本:
"sass": "^1.69.4",
"sass-loader": "^13.3.2",