How can I migrate and change the next.config.js file from @zeit/next-sass to use Next.js built-in support for Sass? /@zeit/next-sass

const withSass = require('@zeit/next-sass')
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });

        return config;
    }
}));

How can I migrate and change the next.config.js file from @zeit/next-sass to use Next.js built-in support for Sass? https://www.npmjs./package/@zeit/next-sass

const withSass = require('@zeit/next-sass')
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });

        return config;
    }
}));

• javascript
• webpack
• sass
• next.js

1 Answer 1

Next.js built-in Sass support requires you to install sass as a dependency.

$ npm install sass

You can then simply remove @zeit/next-sass and @zeit/next-css plugins from your config.

// next.config.js
module.exports = {
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });

        return config;
    }
};

For further details check the official Sass support docs.