Webpack: New option for postcss introducing import bug

[Tirke]

Hello,

'postcss-import': {}, was added to .postcssrc.js in last release.
Currently this option is failing build using ~import in sass files for me.
I have one stylesheet with an import like : @import "~flatpickr/dist/flatpickr.css".
With 'postcss-import': {}, set, an error is thrown :
Module build failed: Error: Failed to find '~flatpickr/dist/flatpickr.css'
Without it, everything is fine.

[LinusBorg]

Hm, that's very weird. Inside .vue file or inside a .scss file?

I don't really understand why because SCSS is supposed to take care of those imports so it should be "gone" by the time postcss is taking care of the result.

Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

can you provide a repo to clone quickly?

[Tirke]

Sure quite easy : here you go

Edit :
Forgot to mention there is an additional alias in base conf : 'css': resolve('src/assets/css')
Additional info :
There is one sass stylesheet importing flatpickr styles using classic node-modules alias.
That stylesheet is imported in App.vue :

<style lang="sass">
  @import '~css/styles.sass'
</style>

[LinusBorg]

Thanks. Will take a look in a few hours, will be on the road until then.

[LinusBorg]

So, I could verify the behaviour, and could also verify that removing the tilde makes it work:

@import 'flatpickr/dist/flatpickr.css'

But that is not a real solution because people used to sass-loader expect the code to work with the tilde.

Unfortunately, I'm a bit baffled why postcss-loader even processes this import. sass-loader is supposed to do that, itsn't it?

Btw, it has nothing to do with vue-loader, as it also happens when loading the file in main.js instead of App.vue.

[LinusBorg]

Note: postcss-import doesn't respect the ~ which loaders, like css-loader or sass-loader use to "mark" module imports. That explains reason for the error, at least.

As to why postcss-loader is called in the first place: I think sass-loaer hands off loading the .css-file to the loader-config for that file type - which uses postcss-loader. I still don't find it logical that postcss-import is executed in that step (rather than on @imports inside of a .css file only), but that sems to be what happens.

So the easy way out would be to simply say: 'don't use tildes when importing .css, but use it for .sass and other preprocessor files', but that won't really be an acceptable solution, we'll have to figure out something else.

[Tirke]

Thanks for the quick "hacky" fix. I do agree that remembering a special case is not ideal though.
We may have to reach out to postcss-import maintainers no ?

[LinusBorg]

No, I don't think that would be promising. I read a couple of issues around this question, and it seems this is the "postcss" way of handling imports.

I will probably attempt use use css-loader's importLoaders option to let css-loader handle the imports, but then still need a solution for vue-loader which applies postcss without postcss-loader, so this option is not on the table.

Maybe we even need a fix in vur-loader itself.

[jarrodldavis]

I ran into this same problem yesterday and the issue is because

1. vue-loader uses PostCSS directly instead of relying on postcss-loader
2. sass-loader skips any imports for paths that end with .css

I was able to workaround the issue by omitting the file extension in the import statement

[LinusBorg]

@jarrodldavis thanks for this.

While I don't think the first point is entirely valid/important (I also reproduced it with an import inmain.js, the second point was the missing piece for me.

The behaviour makes much more sense now, thanks.

I will still try and improve this behaviour, but now I understand what's going on and that it's "expected".

[jcastrov]

I have the same issue with Bootstrap SASS files. They use their imports without extension (See Sass Basics) and I get the same error as @Tirke:

_functions.scss

// Normal code

bootstrap.scss

@import "functions";
// More imports

Error message

Module build failed: Error: Failed to find 'functions'
  in [
    project-path\node_modules\bootstrap\scss
  ]
    at resolveModule.catch.catch (project-path\node_modules\postcss-import\lib\resolve-id.js:35:13)
    at <anonymous>

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-296 13:3-17:5 14:22-304
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

[jcastrov]

A temporal solution for me was importing main SCSS files in main.js, instead of SASS @import, like this

import Vue from 'vue'
import App from './App'

require('bootstrap/scss/bootstrap.scss');
require('../src/style/mycustomstyles.scss');

And it works like a charm 😉

[dangthang7100]

I have the same issue when use vue-nprogress plugin (Failed to find '~nprogress/nprogress.css'), is there any solution for this issue yet? I dont want to custom this plugin by remove the tilde.

[robbiemu]

I'm having a more complicated and sticky problem with this.
vue-multiselect has styles that we would have to clobber with !important rules, unless we import them in scope. But our project uses submodules, and the main project is where package.json is .. so effectively I have to use webpack aliases like:

@import "~@fe/node_modules/vue-multiselect/dist/vue-multiselect.min.css";

that works when loaded from main.js in an scss file:

main.js

require('sass/app.scss')
//...

app.scss

@import "~@fe/node_modules/vue-multiselect/dist/vue-multiselect.min.css";
...

but does not work from the component in the submodule:

<style lang="scss" type="text/scss" scoped>
@import "~@fe/node_modules/vue-multiselect/dist/vue-multiselect.min.css";

no other formulation works from the submodule either:
@import "@fe/node_modules/vue-multiselect/dist/vue-multiselect.min.css";
@import "~/vue-multiselect/dist/vue-multiselect.min.css";

[meteorlxy]

@robbiemu
It may use css-loader to load .css file.

[robbiemu]

The error message says post-css

[meteorlxy]

@robbiemu
For me, this does work:

<style type="text/css" lang="scss">
@import 'github-markdown-css/github-markdown.css'
</style>

But this fails:

<style type="text/css" lang="scss">
@import '~github-markdown-css/github-markdown.css'
</style>