webpack: New option for postcss introducing import bug

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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

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

vue-loader uses PostCSS directly instead of relying on postcss-loader
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

jarrodldavis on Nov 15, 2017

@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>

meteorlxy on Mar 30, 2018

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 😉

jcastrov on Feb 19, 2018