Importing a CSS file into a Sass file with indented syntax is no longer working

[lehni]

Version

3.0.0-rc.10

Node and OS info

Node v9.11.2, Yarn 1.7.0, macOS 10.13.6

Steps to reproduce

Install this simple test-case and run yarn serve:

https://github.com/lehni/vue-cli-issue-sass-import-css

What is expected?

In projects created with Vue CLI 2, these @import statements were working without problems.

What is actually happening?

It looks like the import statement is wrongly trying to parse the CSS file as indented Sass and then complains about the incompatible syntax:

/*! Hint.css (base version) - v2.5.0 - 2017-04-23
                                                   ^
      Invalid CSS after "...- 2017-04-23 */": expected 1 selector or at-rule, was "* http: {}//kushagr"
      in /Users/lehni/Development/Lineto/vue-cli-issue-sass-import-css/node_modules/hint.css/hint.base.css (line 1, column 53)

---

I am encountering this in multiple places with a larger code-base that I am trying to bring to Vue CLI 3

[lehni]

The line in question is here:

https://github.com/lehni/vue-cli-issue-sass-import-css/blob/e1a9eff7fd53aef44eafc60d507c2b6336e1da62/src/App.vue#L15

[lehni]

Very cool! Thank you @yyx990803

[rhinel]

3.0.0-rc.11

no work with @inport *.scss

fix:

module.exports = {
  //...
  css: {
    loaderOptions: {
      css: { importLoaders: 3 },
    },
  },
  // ...
}

[yyx990803]

@rhinel importLoaders: 2 works as intended. Please open a separate issue and provide a reproduction.

[rhinel]

@yyx990803 thanks, I opened an issue:
#2123

[lehni]

@yyx990803 it looks like the same problem still occurs when using the extract: false option.

I have updated https://github.com/lehni/vue-cli-issue-sass-import-css accordingly, and it fails with v3.0.1, see here: lehni/vue-cli-issue-sass-import-css@75bc63d

Shall I create a separate issue for this?