Next.js: 在下一个项目中包含 css？

创建于 2016-11-27  ·  31评论  ·  资料来源: vercel/next.js

我知道 Next 使用 Glamour 和 css-in-js。 但是，有没有办法在 Next 项目中使用真正的 css/less/scss ......不知何故？ 至少是为了引导一个项目？

我的理由是——对于简单的网站，例如 Next 所针对的网站，大多数可以在线购买的预制 html 主题都是使用纯 html 和 css 制作的。 因此，您需要做的就是将 HTML 拆分为 react 组件，将它们放在适当的页面文件夹中，然后就完成了。

我真的很想在我的项目中使用 Next，但如果我不能以某种方式利用现成的 css，那对我来说将是一个交易破坏者。 此用例是否有解决方案或解决方法？

picture manolkalinov

最有用的评论

  • 在/pages文件夹的同一级别创建/static文件夹。
  • 在该文件夹中放置您的.css文件
  • 在您的页面组件中导入Head并将<link />添加到您的 CSS。
import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

就是这样，这样 Next.js 应该在页面头部呈现链接标签，浏览器将下载 CSS 并应用它。

picture sergiodxa 于 2016-11-27
👍79 👎17 🎉7 ❤2 🚀1

所有31条评论

  • 在/pages文件夹的同一级别创建/static文件夹。
  • 在该文件夹中放置您的.css文件
  • 在您的页面组件中导入Head并将<link />添加到您的 CSS。
import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

就是这样，这样 Next.js 应该在页面头部呈现链接标签，浏览器将下载 CSS 并应用它。

sergiodxa picture sergiodxa 于 2016-11-27
👍79 👎17 🎉7 ❤2 🚀1

哇，谢谢你的快速回复:)。 有用！ 只有一个障碍——第一次加载页面时，在所有内容都正确呈现之前，会有一个无样式的 html 闪现。 我不确定它是来自反应后加载的 css 还是 js 文件。 会有解决方法吗？

无论如何，你们所做的工作给我留下了深刻的印象，再次感谢你们的快速回复！

manolkalinov picture manolkalinov 于 2016-11-28

没关系，我在 index 页面中也导入了带有 css 和 js 链接的 header 组件，并且 flash 消失了。 此外，将锚标签更改为链接组件，可以消除任何剩余的跳跃。 缺点是 Link 组件似乎从其子项中剥离了任何 html 标记（例如带有图标类的 span 标记），因此只剩下文本。

我知道这个用例是正确和优化的反面，但它对于我们不得不求助于快速和肮脏的情况非常有用......丑陋:)

所以集成预制 html 主题的工作流程是这样的：

  1. 创建一个静态文件夹并从模板中复制/移动所有 js/css/img 文件
  2. 使用组件创建 page.js 文件
  3. 将html添加到组件并修改它以符合react
    3.1。 添加 Head 标记并在其中包含原始 html 中的所有 css/js 文件
    3.2. 更新这些文件的路径以匹配新的静态文件夹
    3.3. 复制/粘贴head标签下方的html
    3.4 关闭或自关闭任何未关闭的html标签（包括链接、输入和img标签）
    3.5. 用 className=" 查找/替换所有 class=" 实例
    3.6. 删除所有 html 注释
manolkalinov picture manolkalinov 于 2016-11-28
👍9 🎉3 😄3

@manolkalinov您能否附加您的代码以便于参考？ 我知道您编写了工作流程，但如果出现问题，示例代码可以更容易地跟踪和调试。

ralphievolt picture ralphievolt 于 2016-11-29
👍1

在 head 标签中添加 CSS 确实有效。 但是，这有点 hacky，如果我们想使用postcss或sass之类的东西怎么办？ 如何将现有的 css 样式转换为魅力 JSON 对象？ 设计师也很难使用glamor来设置页面样式。 必须有更好的方法来做到这一点。
顺便说一句，与 CSS 模块相比，使用glamor有什么好处？

dzcpy picture dzcpy 于 2016-11-30
👍6

@andyhu请阅读https://github.com/zeit/next.js#faq了解使用glamor的好处。
关于postcss或sass ，自定义 webpack 配置将允许您使用它们（https://github.com/zeit/next.js/pull/222），或者我认为您可以在执行next之前将这些文件编译为 css。

nkzawa picture nkzawa 于 2016-12-01

我认为它已经解决了。 如果您仍然有问题，请随时重新打开。 感谢您的回答@sergiodxa ！

nkzawa picture nkzawa 于 2016-12-01

@nkzawa我使用自定义 webpack 配置，所以我可以在我的项目中使用更少。这是我的代码
next.config.js

/* eslint-disable */

export default {
    webpack: (webpackConfig) => {
        const newConfig = { ...webpackConfig };
        newConfig.module.preloaders.push({
            test: /\.less$/,
            loader:'style-loader!css-loader!less-loader'
        });
        return newConfig;
    },
    cdn: false
}

然后我需要较少的文件import './index.less' ，但发生错误

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)

我确定我已经安装less ， less-loader ， css-loader ， style-loader ，你能提供一些建议吗，在此先感谢。

kimown picture kimown 于 2017-01-05

你应该试试

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'less-loader'
      ]
    })
bkniffler picture bkniffler 于 2017-01-09

@kimown您是否成功导入了较少的文件？ 如果是这样，您介意分享您是如何做到的吗？

crodriguezvega picture crodriguezvega 于 2017-06-25

@sergiodxa如何从 node_modules 导入 css？

saadbinsaeed picture saadbinsaeed 于 2017-07-19
👍17

我自己有这个关于从 npm 包中导入 CSS 的问题。

例如 rc-slider

import 'rc-slider/assets/index.css'

notrab picture notrab 于 2017-07-19
👍12

有答案吗？ @notrab

paulwehner picture paulwehner 于 2017-08-26

@notrab
试试这个

在您的根或 _document 组件中

import stylesheet from 'rc-slider/assets/index.css';

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>
saadbinsaeed picture saadbinsaeed 于 2017-08-28
😕3 👍1

@saadbinsaeed我试过这个。 它适用于自己的组件和页面。 但我想将它与 webpack 捆绑在一起，而不是内联。

schoenwaldnils picture schoenwaldnils 于 2017-09-15
👍1

@schoenwaldnils我试图这样做但做不到。 根据我的理解，我们正在使用服务器端应用程序，因此我们无法捆绑单独的 css 文件并将它们发送到客户端，因为服务器不知道 css 是什么。 我们必须将 css 嵌入到我们的 html 中。 要在整个应用程序中访问它，请将其嵌入根组件中或将其链接到标题中，如上面@sergiodxa 所示。

saadbinsaeed picture saadbinsaeed 于 2017-09-15

我尝试过@sergiodxa方法，但它对我不起作用。 这仍然适用于最新版本的 Next 吗？

nickwild-999 picture nickwild-999 于 2017-10-14

@sergiodxa谢谢。 只是我一直在寻找。

fredybustos picture fredybustos 于 2017-11-30

@sergiodxa你应该改变你的答案。 这不是静态的！ 它必须是静态的

ayberkanilatsiz picture ayberkanilatsiz 于 2017-12-06
👍2

现在使用https://github.com/zeit/next-plugins使用 CSS 导入很简单

抱歉 1 岁的问题。 显然，人们最终通过谷歌来到这里。

timneutkens picture timneutkens 于 2018-08-22
👍1

现在使用https://github.com/zeit/next-plugins使用 CSS 导入很简单

抱歉 1 岁的问题。 显然，人们最终通过谷歌来到这里。

并不真地。 我似乎找不到直接从 node_module 导入 css 的简单方法。 这是设计使然吗？

cyberdude picture cyberdude 于 2018-09-14
👍6

现在使用https://github.com/zeit/next-plugins使用 CSS 导入很简单
抱歉 1 岁的问题。 显然，人们最终通过谷歌来到这里。

并不真地。 我似乎找不到直接从 node_module 导入 css 的简单方法。 这是设计使然吗？

不是真的在下一个版本 7 之后，你已经看过了吗？ 它比以前更容易;)

mtrabelsi picture mtrabelsi 于 2018-09-30

@mtrabelsi您能否举个例子，您如何直接从 Next.js 7 中的节点模块导入 css，因为我坚持使用它。 我需要从节点模块导入一些样式，但找不到有效的解决方案。

bogdan100 picture bogdan100 于 2018-11-13

我们通过使用 copy-webpack-plugin 解决了这个问题。
在 webpack 配置（next.config.js）中：

config.plugins.push( new CopyWebpackPlugin([ { from: path.join(__dirname,'node_modules/react-datepicker/dist/react-datepicker.css'), to: path.join(__dirname, 'static/react-datepicker.css') } ]) );

yarakhater picture yarakhater 于 2018-12-13

您可以检查客户端 css 修复的修复https://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 picture AmanAgarwal041 于 2019-01-17

我认为有一种更简单的方法可以做到这一点：

3个简单的步骤：

  1. 安装 next-css 插件：
npm install --save @zeit/next-css
  1. 在你的根目录下创建 next.config.js ，内容如下：
// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})
  1. 现在你应该可以像这样从 node_modules 导入样式表了：
import 'bootstrap-css-only/css/bootstrap.min.css';

_注意：使用 Next v 8+_

背景：
我花了几个小时试图简单地导入作为 node_module 安装的 CSS，各种解决方案大多是 hacky 解决方法，但如上所示，有一个简单的解决方案。
它由核心团队成员之一提供： https ://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq picture Vrq 于 2019-03-20
👍18 🎉12 ❤7

如果有人使用@sergiodxa的答案，如果您将文件夹命名为static ，则链接标签应引用为static 。

garrettmaring picture garrettmaring 于 2019-11-14

😂 似乎人们阅读 GitHub 问题的次数超过了官方文档 (https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi picture mtrabelsi 于 2019-11-14

@mtrabelsi ，这个问题比文档imo更有价值，如果你想直接使用css，例如import 'bootstrap-css-only/css/bootstrap.min.css'; ，文档中没有提及，直到我找到@Vrq的答案

Tokenyet picture Tokenyet 于 2019-11-24
👍1

@timneutkens

我正在尝试只导入我自己的普通 css 文件。 最后是使用https://github.com/zeit/next-plugins/tree/master/packages/next-css中的文档导入它的正确方法
还是使用 2017 年的@sergiodxa答案的正确方法，它通过<Head>标签中的链接导入？

这是我最后发现的：

  • 当您直接加载页面时，这两种方法都有效（直接转到 url）
  • 当您第一次使用 Router.push 导航到页面时，只有 Sergios 方式有效（使用 next-css 文档中的方式不会加载 css）
  • Sergio 方式的唯一问题是，当我第一次使用 Router.push 访问页面时，我仍然会看到无样式 html 的闪烁

知道如何避免这种闪光，而无需将我的 css 包含在 _document 文件中吗？

欣赏它。

Ollynov picture Ollynov 于 2019-12-03

有关 Next.js 的 CSS 支持，请参阅 #8626！

Timer picture Timer 于 2019-12-03
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

rauchg picture rauchg  ·  3评论
sospedra picture sospedra  ·  3评论
timneutkens picture timneutkens  ·  3评论
renatorib picture renatorib  ·  3评论
jesselee34 picture jesselee34  ·  3评论