Nuxt.js: PostCSS Loader - SourceMap warning

[frankspin89]

PostCSS loader keeps complaining about soureMap isn't set. Tried many different things, but nothing seems to work.

(Emitted value instead of an instance of Error)

 ⚠️  PostCSS Loader

Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map entirely for performance reasons.
See https://github.com/postcss/postcss-loader#sourcemap for more information.



 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-36d0932b","scoped":false,"hasInlineConfig":true}!./~/postcss-loader/lib!./~/vue-loader/lib/selector.js?type=styles&index=0!./components/PageHeader.vue 4:14-335 13:3-1
7:5 14:22-343
 @ ./components/PageHeader.vue
 @ ./~/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":true}!./~/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js

nuxt.config.js

build: {
    extend(config, ctx) {
      const cssLoader = config.module.rules.find((loader) => loader.test.toString() === '/\\.css$/')
      cssLoader.use.splice(2, 0, {
        loader: 'postcss-loader',
        options: {
          sourceMap: true
        }
      })
  }

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': { autoprefixer: true },
    'postcss-nested': {},
    'cssnano': {}
  },
  sourceMap: true
}

_{This question is available on Nuxt.js community (#c961)}

[maicong]

This is my solution, I hope this will help you.

nuxt.config.js

build: {
  postcss: [],
  extend (config) {
    const postcssLoader = {
      loader: 'postcss-loader?sourceMap'
    }
    config.module.rules.forEach(loader => {
      if (loader.test.toString() === '/\\.styl(us)?$/') {
        loader.use.splice(-1, 0, postcssLoader)
      }
      if (loader.loader === 'vue-loader') {
        loader.query.loaders.stylus.splice(-1, 0, postcssLoader)
        loader.query.loaders.styl.splice(-1, 0, postcssLoader)
      }
    })
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-cssnext')({
      warnForDuplicates: false,
      browsers: [
        'Chrome >= 28',
        'Firefox >= 28',
        'Edge >= 12',
        'Explorer >= 9',
        'Safari >= 5.1',
        'iOS >= 7',
        'Android >= 4',
        'ExplorerMobile >= 11',
        'ChromeAndroid >= 54',
        'FirefoxAndroid >= 50',
        'UCAndroid >= 11',
        'OperaMobile >= 12.1',
        'BlackBerry >= 10',
        'Samsung >= 4'
      ]
    }),
    require('postcss-import')(),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

[frankspin89]

hi @maicong. Sadly still getting the same error related to the sourceMap isn't set.

[frankspin89]

Possible related:

https://github.com/postcss/postcss-loader/issues/271#issuecomment-312566423
https://github.com/postcss/postcss-loader/issues/264
https://github.com/postcss/postcss-loader/issues/248

[frankspin89]

How would I disable sourceMap option on vue-style-loader and css-loader?

[yoyo837]

@frankspin89
If you do not use postcss new features, consider switching to a lower version [email protected].
There is no better way before I know something new.
I have provided a demo to the Postcss author many days ago.

[pi0]

The problems with postcss and its source map are going to almost resolved in next (rc5) release. (5d2429459a5920a0a02ace97127bbe7b47199eea) Also a new build.cssSourceMap option is added so we can entirely disable ALL css related sourcemaps. (However not a good idea for dev mode)

[pi0]

Now is available :)

[cihadturhan]

Sorry @pi0 for resurrecting this issue but I still see same error on my console. It throws
Previous source map found, but options.sourceMap isn't set. for evey vue file with style in postcss. This drives me mad but I don't understand what's wrong. I'm using rc11.
Thanks

[cihadturhan]

Okay, I here is what's wrong: Don't include lang for postcss.
Change this

<style lang="postcss" scoped>
...
</style>

to

<style scoped>
...
</style>

[ghost]

I have got the same problem and @cihadturhan solution works. However, now the syntax highlighting in VS Code (Vetur plugin) is wrong, because not including the lang tag defaults to CSS syntax highlighting. Is there another solution to fix this issue altogether?

[Sawtaytoes]

In my case, I was able to get rid of them by putting postcss-loader after stylus-loader. Is there a reason for that? Does it cause other issues?

[chanlito]

is anyone having this issue with the latest nuxt-edge? I'm getting Previous source map found, but options.sourceMap isn't set. warning I'm not even using postcss, @pi0 @clarkdo ?

[clarkdo]

Hi @chanlito, this is a closed isssue, could you please open a new one and follow the issue template ?

[clarkdo]

@chanlito
This warning has been fixed in https://github.com/postcss/postcss-loader/pull/361
I'll upgrade post-loader now.

[ghost]

Having the same minor issue as https://github.com/nuxt/nuxt.js/issues/1095#issuecomment-332151872 .

@clarkdo is this something i should log under the Vetur (@octref) project? Or is there something i can do to correctly get VS Code to highlight styles correctly as PostCSS and have it compile correctly with nuxt-edge?

[octref]

You can see the discussion here: https://github.com/vuejs/vetur/issues/506 https://github.com/vuejs/vue-cli/pull/1259

Vetur / VS Code uses textmate grammar which is not as flexible as build tools. It doesn't know your build config and don't know if you are using postcss.

Another issue is that we have CSS error-checking, but not PostCSS error-checking, as currently there is no PostCSS error checker available, so I have to turn off error-checking for PostCSS sections.

So, if you have a flexible build tool, you should make <style lang="postcss"> work for your build. It's really not that hard: https://github.com/vuejs/vue-cli/commit/1037b9c9be12ff6be65a1619398f24fa64930393

I like things being explicit and simple:

• <style> receives css syntax highlight and errors
• <style lang="postcss"> receives postcss syntax highlight and no errors for now
• In the future when we have a PostCSS error checker, <style lang="postcss"> will receive PostCSS errors

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.