Fail to import google fonts with sass

[snowman]

// FILE: vue.config.js
const path = require("path")

module.exports = {
  pluginOptions: {
    ...
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: [
        path.resolve(__dirname, 'src/assets/styles/main.sass')
      ]
    }
    ...
  }
}

// FILE: main.sass
@import url('https://fonts.googleapis.com/css?family=Karla:400,700|Rubik:400,500,700')

Error:

File to import not found or unreadable: ../assets/styles/url('https://fonts.googleapis.co│
m/css?family=Karla:400,700|Rubik:400,500,700')

[snowman]

SOLUTION

// FILE: src/assets/styles/base/_typography.sass
@import url('https://fonts.googleapis.com/css?family=Karla:400,700|Rubik:400,500,700')

// FILE: main.sass
@import 'base/typography'

[yenshih]

It must be a bug when the loader resolves @import url(). I will fix this. Thanks for reporting.

[danhorton7]

I am still experiencing the exact same issue as @snowman, moving the type imports to a separate file worked fine.

[mihailthebuilder]

It's a problem with sass-resources-loader as well: https://github.com/webpack/webpack/issues/8865#issuecomment-472998437

[yenshih]

Actually it's not a problem. Statements like @import url('https://fonts.googleapis.com/css?family=Karla:400,700|Rubik:400,500,700') is not preferred to inject into all style files, they may be imported only once.

[nobi1007]

Also, moving those url imports from your .scss file to your index.html file should work fine.