如何远离@zeit/next-sass 弃用

问题描述

如何从 @zeit/next-sass 迁移和更改 next.config.js 文件以使用 Next.js 对 Sass 的内置支持？ https://www.npmjs.com/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;
    }
}));

解决方法

Next.js 内置的 Sass 支持要求您安装 sass 作为依赖项。

$ npm install sass

然后您可以简单地从您的配置中删除 @zeit/next-sass 和 @zeit/next-css 插件。

// 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;
    }
};

有关详细信息，请查看 official Sass support docs。