next.js使用 antd, 支持 css 和 scss

项目开发中, 大多数团队都会选择使用开源的 UI 库, 那么在 next.js 中要引入第三方库. 我们需要进行相应的配置. 在 css 预处理器上, 目前团队使用 scss . 个人觉得非常好用. 如果要使用 scss 我们必须要做简单配置, 否则是无法使用的

配置下载

# npm 
npm install css-loader node-sass @zeit/next-css @zeit/next-sass --save
# yarn
yarn add css-loader node-sass @zeit/next-css @zeit/next-sass

在根目录下创建 next.config.js

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
 
module.exports = () => withSass(withCSS())

引入 antd

# npm
npm install antd --sava

# yarn
yarn add antd

引入 babel

# npm
npm install babel-plugin-import --save

# yarn
yarn add babel-plugin-import

在根目录创建 .babelrc

{
    "presets":["next/babel"],
    "plugins":[
        [
            "import",
            {
                "libraryName":"antd"
            }
        ]
    ]
}

接下来就可以开心的使用 antd 和 scss了

原文：https://wangdaoo.github.io/post/nextzhichicss/

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8599