sass-loader 无法理解@use with？

Question

我正在关注https://sass-lang.com/documentation/at-rules/use 在 Vue 2.6.x "sass": "^1.32.11", "sass-loader": "^10.1.0" 中尝试 @use with ，并且在尝试将 sass 文件导入我的 Vue 组件时总是出错

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                                                                friendly-errors 14:59:26  
SassError: expected "$".
  ╷
3 │ @use 'library' with (
  │                      ^
  ╵

  assets\css\fanclub.sass 3:22  @import
  pages\clb\_slug.vue 132:9     root stylesheet

Answer 1

@use不适用于node-sass，但sass（又名dart-sass）。
因此，您需要安装它 (yarn add -D sass) 并进行一些配置。

/* vue.config.js */
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  }
}

如图所示：https://dev.to/matiaslopezd/how-to-use-dart-sass-with-vue-1m41