Question

我正在静态生成使用 NextJS 中的组件的页面。我将 Bootstrap 和 SASS 与全局 style.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"

Answer 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 和上面的全局样式表 - style.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 也成功。

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

Answer 2

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

最初具有以下文件夹结构：

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

现在我有：

/pages:
/usersComponents
/adminComponents
/otherComponents

注意：在“pages”文件中导入的“styles”作为道具传递给子组件。

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

2 个答案: