vue.js - 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"，并且在尝试将 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

标签： vue.jssassnuxt.jssass-loader

Answer 1

@use不可与node-sass但可与sass(aka 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