Next-plugins: Source maps with Sass

[gdi-user02]

Hi, I would like to add source maps to Sass. I have not been able to make it work, already tried a lot.

package.json

"dependencies": {
    "@zeit/next-sass": "^0.2.0",
    "next": "^6.1.1",
    "next-redux-wrapper": "^2.0.0",
    "node-sass": "^4.9.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7"
  },

postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['last 2 versions', 'iOS >= 8']
        }
    }
}

next.config.js

const withSass = require('@zeit/next-sass')

module.exports = withSass({
    sassLoaderOptions: {
        sourceMap: true
    }
})

any ideas? thank you

[shectermen]

same problem, I can not make it work, next.config.js in root dir not working, and I do not understand how to use config/next.js conf:{}, please help

[vincentducorps]

Do not forget to keep sourcemap in PostCSS loader options :

  postcssLoaderOptions: {
    sourceMap: true
  }

So your next.config.js becomes :

module.exports = withSass({
    sassLoaderOptions: {
        sourceMap: true
    },
    postcssLoaderOptions: {
         sourceMap: true
    }
})

This should clearly become a default next-sass option, I would do a PR if I have time.

[Reggino]

Sass sourcemap support should be fixed by #572

[skylarmb]

I have

    sassLoaderOptions: {
        sourceMap: true
    },
    postcssLoaderOptions: {
         sourceMap: true
    }

and scss sourcemaps are still not working. Next.js 9.3.2 using next-sass (since built-in sass is broken for many things, see: https://github.com/vercel/next-plugins/issues/282#issuecomment-592184187)

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.