部署到 Vercel 时编译 NextJS 和 Sass 全局样式表时出错答案

【问题标题】：Error compiling NextJS & Sass Global stylesheets when deploying to Vercel部署到 Vercel 时编译 NextJS 和 Sass 全局样式表时出错
【发布时间】：2021-03-19 22:15:57
【问题描述】：

我正在静态生成使用 NextJS 中的组件的页面。我将 Bootstrap 和 SASS 与全局 styles.scss 一起使用。

当我尝试从我的 Github 存储库将我的应用程序部署到 Vercel 时，编译失败。该错误与 sass 相关，但我终其一生都无法弄清楚是什么原因造成的。在本地运行或构建时不存在任何错误。

部署时，错误提示它不能在我的全局 .scss 文件中使用 @import 文件。

我正在使用最新版本的 Next.js 9 >。

部署错误日志如下所示：-

21:36:21    Cloning github.com/nigeymc/Portfolio-App-NextJS-Refactor (Branch: master, Commit: baa537e)
21:36:22    Cloning completed in 418ms
21:36:22    Analyzing source code...
21:36:22    Installing build runtime...
21:36:25    Build runtime installed: 2976.247ms
21:36:28    Looking up build cache...
21:36:28    Build cache not found
21:36:29    Installing dependencies...
21:36:29    yarn install v1.22.10
21:36:29    [1/4] Resolving packages...
21:36:30    [2/4] Fetching packages...
21:37:07    info fsevents@2.3.2: The platform "linux" is incompatible with this module.
21:37:07    info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
21:37:07    info fsevents@1.2.13: The platform "linux" is incompatible with this module.
21:37:07    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
21:37:07    [3/4] Linking dependencies...
21:37:07    warning " > bootstrap@4.6.0" has unmet peer dependency "popper.js@^1.16.1".
21:37:24    [4/4] Building fresh packages...
21:37:36    Done in 66.23s.
21:37:36    Detected Next.js version: 10.0.7
21:37:36    Running "yarn run build"
21:37:36    yarn run v1.22.10
21:37:36    $ next build
21:37:37    info  - Creating an optimized production build...
21:37:37    Attention: Next.js now collects completely anonymous telemetry regarding usage.
21:37:37    This information is used to shape Next.js' roadmap and prioritize features.
21:37:37    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
21:37:37    https://nextjs.org/telemetry
21:37:59    Failed to compile.
21:37:59    ./styles/styles.scss
21:37:59    SassError: Can't find stylesheet to import.
21:37:59      ╷
21:37:59    2 │ @import "./variables/Colors";
21:37:59      │         ^^^^^^^^^^^^^^^^^^^^
21:37:59      ╵
21:37:59      styles/styles.scss 2:9  root stylesheet
21:37:59    > Build error occurred
21:37:59    Error: > Build failed because of webpack errors
21:37:59        at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
21:37:59        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
21:37:59    error Command failed with exit code 1.
21:37:59    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
21:37:59    Error: Command "yarn run build" exited with 1
21:38:04    Done with "package.json"

【问题讨论】：

/styles/variables/Colors 文件是否存在？也许尝试在文件名中完全不使用大写？

标签： javascript reactjs sass next.js vercel

【解决方案1】：

在对全局样式表进行大量重构之后，我成功地部署了我的应用程序。对于可能在使用最新的 NextJS 和 Sass 全局样式表时遇到类似问题的任何人，这是我修复它的方法。

我最初有一个名为 styles.scss 的主样式表，它看起来像这样：-


// Import variables
@import "./variables.scss";

// Import Bootstrap
@import "~bootstrap/scss/bootstrap";

// Global CSS
@import "./global.scss";

// Components
@import "./components/component1.scss";
@import "./components/component2.scss";
@import "./components/component3.scss";

// Sections
@import "./sections/homepage-section.scss";
@import "./sections/general-section.scss";

这个设置产生了很多错误，因为 NextJS sass 加载器找不到导入的文件。由于某种原因，它也不喜欢局部。

在_app.js 中，我导入了上面的 Bootstrap、Normalize 和我的全局样式表 - styles.scss。

我不知道为什么它不喜欢这个，作为 babel，我的 React 应用程序中的各种加载器都没有问题。

最后我不得不通过以下方式解决它：-

我创建了一个 variables.scss，其中仅包含我的所有 @imports - 变量和组件。


@import "./spacing.scss";
@import "./colors";
@import "./typography";
@import "~bootstrap/scss/bootstrap";
@import "./homepage-section.scss";
@import "./general-section.scss";
@import "../components/component1.scss";
@import "../components/component2.scss";
@import "../components/component3.scss";

然后我不得不将以下内容添加到 next.config.js

sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
        prependData: `@import "./variables/_variables.scss";`,
    },

然后我删除了 styles.scss 并将 Global.scss 添加到 _app.js - 注意大写的“G”。由于某种原因，如果它是小写的，它会破坏 Vercel 部署。

import 'bootstrap/dist/css/bootstrap.min.css';
import 'normalize.css/normalize.css';
import '../styles/Global.scss';
import { Provider } from 'react-redux';
import { useStore } from '../store/configureStore';

const MyApp = ({ Component, pageProps }) => {
    const store = useStore(pageProps.initialReduxState)

    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>

    )
}

export { MyApp as default };

我的 Global.scss 不包含 @imports 仅包含全局样式。

完成此操作后，应用构建成功，并且部署到 Vercel 也成功。

希望这对遇到类似问题的人有所帮助。

【讨论】：

【解决方案2】：

对我有用的是将除实际页面之外的所有其他文件从 pages 文件夹中移出，并将它们放在项目的根文件夹中。只有父页面应该在pages 文件夹中！

最初有以下文件夹结构：

/pages/
/pages/usersComponents
/pages/adminComponents
/pages/otherComponents

现在我有：

/pages:
/usersComponents
/adminComponents
/otherComponents

注意：“页面”文件中导入的“样式”作为道具传递给子组件。

【讨论】：

【解决方案3】：

感谢@i-am-niall 回复您自己的问题，这是为我解决问题的大写字母。

改变：

...
@import '_shared.scss';
@import 'footer.scss';
@import 'forms.scss';
...

收件人：

...
@import '_shared.scss';
@import 'Footer.scss';
@import 'Forms.scss';
...

当然还有重命名文件，构建成功。

【讨论】：