Next JS 中的 Sass 库答案

【问题标题】：Sass library in Next JSNext JS 中的 Sass 库
【发布时间】：2021-02-16 21:51:50
【问题描述】：

我的公司使用包含 mixins 等的 Sass 库。我已经在我的 Next JS 项目中安装了 NPM。

我的 next.config.js 文件如下所示：

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

在 _app.js 我有import '../styles/main.scss' 我不明白的是如何让 NextJS 包含我的库？

在其他项目中，我们会添加一个 npm 脚本“build:css”：“npx fe-styleguide-build”，但我希望从 Next JS 热重载中受益，以便在样式更新完成后立即查看。

【问题讨论】：

标签： sass next.js

【解决方案1】：

Next.js 原生支持 sass，您只需将 npm install sass 放入您的项目并将 .css 更改为 .scss，无需为此调整配置文件。使用npm dev，您的 sass 将被实时编译。

【讨论】：

我的问题不是关于设置和使用 Sass，而是关于在 NextJS 代码库中使用 Sass 库

【解决方案2】：

您可以直接从 node_modules 导入样式。将文件导入到 pages/_app.js 中，以便所有其他组件也可以访问它：

// pages/_app.js
import 'your-library/dist/css/path-to-your-css.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

在docs 中了解更多信息。

【讨论】：