sass-loader 无法解析 @import url

Question

我正在使用 nuxt.js 和 fastify.js ( fastify-vue-plugin ) 并且我正在设置我的样式。

scss 可以编译并且可以工作，但是当我尝试从 googlefonts 导入字体时会引发错误：

// _variables.scss
@import url('https://fonts.googleapis.com/css?family=Crimson+Text&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

// styles.scss
@import 'variables'; // i've tested this import, it works flawlessly.

npm run dev 遇到的错误是：

ERROR  Failed to compile with 1 errors                                                                           friendly-errors 04:00:16


 ERROR  in ./assets/scss/styles.scss                                                                              friendly-errors 04:00:16

Module build failed (from ./node_modules/postcss-loader/src/index.js):                                            friendly-errors 04:00:16
Error: Can't resolve 'https:/fonts.googleapis.com/css?family=Crimson+Text&display=swap' in '/Users/home/Projects/voxicard-app/assets/scss'
    at onError (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
    at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:166:11)
    at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:249:35)
    at /Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:23:4
    at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
                                                                                                                  friendly-errors 04:00:16
 @ ./assets/scss/styles.scss 4:14-301 14:3-18:5 15:22-309
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

// nuxt.config.js
...
css: [
    './assets/scss/styles.scss'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    '@nuxtjs/style-resources'
  ],
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },
  styleResources:{
    scss:[
        './assets/scss/*.scss',
    ]
  },
...

我有另一个项目，我使用了具有相同字体导入的 sass-loader 并且工作正常，尽管它不是 Nuxtjs 项目。

这里有什么问题？

Answer 1

根据 Aldarund 的评论，我设法通过从我的 nuxt.config.js 中删除此行来修复此错误

// nuxt.config.js
styleResources : {
    scss: [
        './assets/scss/*.scss' // <<<< I Removed this line and kept this array empty.
    ]
}