Next.js: 导入CSS文件？

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

有时，将CSS分解为一个单独的.css文件很不错。我尝试执行以下操作：

pages/
└── index
    ├── index.css
    ├── index.js
    └── component.js

然后在index.js中，我尝试执行以下操作：

import css from './index.css'

在next.config.js中：

module.exports = {
  webpack: function (config) {
    config.module.loaders = (config.module.loaders || []).concat({
      test: /\.css$/, loader: 'raw'
    })
    return config
  }
}

但不幸的是，它一直给我：

 ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

* ./index.css

似乎由于某种原因它无法解析到正确的位置，尽管本地component.js可以通过import component from './component.js' ，所以我不确定这里发生了什么。

资料来源

matthewmueller

👍27

最有用的评论

这是使用babel-plugin-inline-import导入CSS文件的简单解决方案：

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ]
}

页面/组件

import "prismjs";

import { PrismCode } from "react-prism";
import prismGlobalStyles from "prismjs/themes/prism.css";

export default () => {
    return (
        <div>
            <style global jsx>
                {prismGlobalStyles}
            </style>
            <PrismCode className="language-javascript">
                {`function(noop) {
                    return noop;
                }`}
            </PrismCode>
            {/* ... */}
        </div>
    );
};

stovmascript 于 2017-08-29

👍34 🎉5 😄3 ❤1 😕1

所有102条评论

您是说这在服务器上不起作用？
我认为我们还没有解决方法。抄送@arunoda

nkzawa 于 2016-12-28

哦，对了，我想有一种方法可以使next.config.js中的webpack配置在两侧都能正常工作。

matthewmueller 于 2016-12-28

👍3

我遇到了类似的问题，就是我似乎无法让Next很好地与CSS或SASS配合使用。我有一个带有标准React组件的components目录，它会导入到页面中，但是每当我尝试导入SASS（或CSS）文件时，我都会得到一个〜“您需要为此文件使用适当的加载器”键入错误消息。

通常在React中，我会导入SASS文件，并使用样式，css和sass加载器来使Webpack进行编译。我试图将它们添加到next.config.js文件中（并且NPM安装了它们），但仍然收到相同的错误消息。

我的next.config.js文件：

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({ test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] });
    return config;
  }
}

抱歉，如果这些问题听起来很愚蠢，或者我错过了一些明显的文档，这些文档清楚地阐明了答案，但是如果有人能通过示例将SASS（或至少CSS）导入/编译到组件或页面中，无论需要添加到next.config.js以加载/编译它们，我都将非常感谢。谢谢！

MikeDigitize 于 2016-12-28

👍23

我正在使用css-modules-require-hook
使CSS工作。

spacedragon 于 2016-12-29

👎6 👍5

@spacedragon您是否有一个示例如何将CSS模块需要挂钩与Next.js集成？我在使其正常工作时遇到问题。

kpuputti 于 2017-01-03

👍30

如果有人可以阐明如何执行此操作，或者只是在Next中导入CSS文件，我仍然会遇到无法通过SASS进行编译的问题（通过代码示例）。

MikeDigitize 于 2017-01-03

有趣的是，不建议自述文件已更新，以删除SVG加载程序示例，并建议不要为SVG，CSS和SASS之类的文件添加加载程序。我不确定为什么内联CSS可以，但是导入的CSS不可以，但是我确定有很好的理由。我目前尚不确定处理没有JS定义/内联CSS和SASS的最佳策略。

MikeDigitize 于 2017-01-06

@MikeDigitize参见对＃627和＃638的

kpuputti 于 2017-01-06

实际上，可以在服务器端处理样式非常容易。

直接在节点中：

require.extensions['.css'] = function(file) {
    console.log(file.id)
    return;
}

通过babel寄存器：

// from https://babeljs.io/docs/core-packages/babel-register/
require("babel-register")({
  // Optional ignore regex - if any filenames **do** match this regex then they
  // aren't compiled.
  ignore: /regex/,

  // Ignore can also be specified as a function.
  ignore: function(filename) {
    if (filename === '/path/to/es6-file.js') {
      return false;
    } else {
      return true;
    }
  },

  // Optional only regex - if any filenames **don't** match this regex then they
  // aren't compiled
  only: /my_es6_folder/,

  // Setting this will remove the currently hooked extensions of .es6, `.es`, `.jsx`
  // and .js so you'll have to add them back if you want them to be used again.
  extensions: [".es6", ".es", ".jsx", ".js"]
});

通过webpack加载程序：

忽略加载器-https: //www.npmjs.com/package/ignore-loader
isomorphic-style-loader- https://www.npmjs.com/package/isomorphic-style-loader

我个人使用isomorphic-style-loader，因为它允许我在服务器上渲染时内嵌关键CSS。热装和其他与DX相关的东西也可以使用。我不太喜欢JS中的CSS，因为它使使用第三方组件变得复杂，并且以某种方式使CSS脱离了C语言。

viktorbezdek 于 2017-01-17

👍1

@viktorbezdek您是否

noeljackson 于 2017-01-19

👍1

@noeljackson不是，但我打算这样做。 Next.js看起来很有希望，并且如果我能使它工作的话，可以节省很多时间。我会在接下来的一两周内进行调查，如果我成功的话，将提交拉取请求。

viktorbezdek 于 2017-01-20

👍2

@viktorbezdek我将为此悬赏，因为这对于我正在从事的项目确实至关重要。我知道我并非无能为力，但我不了解如何调试babel转换以解决这一问题。我已经尝试过对这些想法进行排列，但100％无效。我已经能够使用babel-plugin-webpack-loaders来使raw-loader加载数据编码的样式表，但是这些样式加载器均无法正常工作。感谢您的参与！：）非常感激。

noeljackson 于 2017-01-21

😄1

有针对这个的解决方法吗？我希望看到一个解决方案，因此不必在全局范围内包含CSS。

pencilcheck 于 2017-01-26

FWIW，我刚刚将我的CSS文件放在/static文件夹中。托管不是很好，但也没有什么大不了的。

matthewmueller 于 2017-01-26

会有一个解决方案。我只是没有设法完成它。我在本地拥有第一个原型，该原型似乎可以运行，但是需要几个小时才能完成。我很确定周末以后会做完。敬请关注。

viktorbezdek 于 2017-01-27

@matthewmueller您正在使用CSS模块吗？

viktorbezdek 于 2017-01-27

@viktorbezdek感谢您为此工作！ CSS模块支持（或类似功能）对于此项目IMO非常重要。样式化的jsx在简单情况下是可以的，但对于样式繁重的组件则很难阅读。

这样的babel插件会是一个选项吗（服务器端也是）？ https://github.com/gajus/babel-plugin-react-css-modules

我试图使它工作，但没有运气：/

abelovic 于 2017-01-27

我得到了CSS模块，可以与babel-plugin-css-modules-transform 。请参阅我的分叉示例。

缺点是，每次更改CSS时，您都必须杀死服务器并重新启动服务器。

stephenmathieson 于 2017-01-27

一些React组件通过具有import能力的静态资源公开默认样式。例如，要导入默认样式的https://github.com/react-component/slider，可以使用以下方法：

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

可以将这个样式表复制粘贴到static/目录中，但是在将来的组件更新中它不会与上游样式保持同步，并且与该组件文档所建议的不匹配。

mquandalle 于 2017-01-28

👍28

问题在于这些CSS文件引入了全局效果。我们需要能够捕获CSS并将其放入React生命周期中，以便将其卸载，服务器渲染等。

许多图书馆都这样做，但是我认为这不是一个好的模式。

rauchg 于 2017-01-28

👍7 👎6

我不熟悉Zeit Next内部结构，但是可以对import进行一些静态分析来注册/捕获CSS吗？

mquandalle 于 2017-01-28

我们可以，但是真的很奇怪。类似于render()之外的东西，神奇地将其自身插入了组件生命周期。

rauchg 于 2017-01-28

//想我会和其他人分享

好吧...我只是花了太多时间试图在这里破解CSS，但是我找到了一个对我来说有效的解决方案。诚然，这是一个hack，但是热重装可以工作，服务器端构建也可以。

使用（_shudder_）gulp和此gulpfile（https://gist.github.com/auser/25e88e39d83413773c01f4c000ec2806）将所有**/*.scss文件放在一起并推入我安装在的Styles组件中该页面作为“常规”元素。

希望这对其他人有帮助，直到我们接下来可以得到真正的Postcss支持。

auser 于 2017-01-28

感谢您的@auser攻击，我

编辑：
顺便说一句，您需要在gulpfile中添加一个sass解析器！

brycejacobs 于 2017-01-30

是的，不是。。。我只是使用.scss扩展名来区分纯css文件和预编译文件。由于postcss（具有precss ）很好地模仿了sass，所以我没有一个。随意使用Sass解析器进行编辑。

auser 于 2017-01-30

👍1

似乎这是当前最好的解决方案，如果您不介意不进行热重装，则可以使用gulp编译css文件并内联构建，甚至可以在/ static中构建。

ghost 于 2017-01-31

我得到了css import + hot reload以一种干净的方式工作。 CSS作为字符串导入，用户可以像其他字符串一样在页面中内联它。请看这个例子，帮助我测试，欢迎PR！

https://github.com/davibe/next.js-css-global-style-test

我相信此示例应将其纳入next.js官方示例。可以？ @rauchg @arunoda @nkzawa （对不起，如果我标记了未直接参与的人）

davibe 于 2017-01-31

🎉18 👍10

@davibe感谢您的演示和babel-plugin-wrap-in-js

iamstarkov 于 2017-02-02

在示例中，我看到了CSS文件和SCSS文件的使用。您知道这是否适用于postcss和cssnext吗？

khrome83 于 2017-02-02

@ khrome83我不明白为什么不这样做，我认为这只是调整.babelrc和next.config.js的问题

davibe 于 2017-02-03

@davibe我发现我无法根据您的配置来部署我的应用程序。生成无法读取next/babel .babelrc文件中的next/babel 。我提交了一个问题，但我真的很希望所有这些事情都能找到解决方案。从create-react-app缺少import file.css的难易程度，但我知道一定有解决方案了:)

tgoldenberg 于 2017-02-03

我想要的解决方案可能遵循以下原则：

https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969

我们可能支持导入.css （通过简单地将其编译为导出字符串的模块）（同样，我们也可以通过将其编译为纯React组件来支持.svg ）

rauchg 于 2017-02-03

👍6 👎2

同样，我们可以通过将.svg编译为纯React组件来支持它

这是一个非常简单的技巧。我将创建一个基本示例，说明如何在另一个项目中处理此问题=）

编辑：请参阅https://github.com/zeit/next.js/pull/982

stephenmathieson 于 2017-02-03

基于@davibe示例，我创建了https://github.com/moxystudio/next.js-style-loader ，希望可以减轻将CSS文件添加到next.js项目中的麻烦。它与webpack的style-loader类似，因为它将在用户导航时添加/删除样式表。它还支持SSR。

它与css-loader （带有和不带有css模块）， postcss-loader ， sass-loader以及其他可能的东西一起使用时效果很好。请注意，使用css-loader时，必须将其url选项设置为false beucase next.js图像，字体等必须使用/static 。您可以在自述文件中找到所有这些信息。

享受，请给我反馈！

satazor 于 2017-02-06

👍7 🎉1

感谢您的回购！它用于导入css文件。我正在尝试blueprintjs，似乎CSS正确加载！但是，css包含的@ font-face规则似乎不起作用。：

- - - - - - - - - - 编辑 - - - - - - - - - - -

它实际上正在工作，我不好！
但是，图标未加载，因为默认情况下nextjs路由不允许在/ static /之外提供静态内容，而相对路径实际上导致其使用不允许的路径加载。

pencilcheck 于 2017-02-06

@pencilcheck是的，您必须使用指向/ static的路径，也许我会在自述文件中更清楚地说明这一点。

satazor 于 2017-02-06

👍1

关于css文件中包括字体atm之类的相对路径，是否有任何变通办法？还是我只需要将整个字体文件和CSS复制到静态文件夹中即可工作？

pencilcheck 于 2017-02-06

👍1

@pencilcheck CSS文件可以保持静态之外。您的图像和字体必须在static内，并使用/static/file引用它们。

satazor 于 2017-02-06

我知道了。但是我正在使用蓝图，这是一个npm软件包，我希望不必修改node_modules内部的任何文件。

pencilcheck 于 2017-02-06

@pencilcheck不幸的是，这不可能。 next.js在处理图像和其他资产方面非常严格。让我们不要污染这个对话，如果可以的话，请在next-style-loader仓库中创建一个问题。

satazor 于 2017-02-06

@tgoldenberg您能更好地描述问题还是告诉我如何重现？请参考我的资料库。对我来说，在这里跟踪问题更容易。

davibe 于 2017-02-06

@davibe ，最终导致使用yarn超过npm install 。 Yarn引发了一些莫名其妙的错误，但是一旦我将其删除，该示例在生产中就可以正常工作。

tgoldenberg 于 2017-02-06

我只花了4个小时尝试进行设置，并认为这可能对希望节省时间的任何人都感兴趣。它会在更改时自动应用样式（就像在当前示例中一样），通过PostCSS运行CSS，并从css-loader提供本地模块名称。在“全球css” /“ css进口”示例的当前状态下，缺少后者是我的主要交易突破点。

component.js

import React from 'react';
import stylesheet from './styles.css';

const [css, className] = stylesheet;
const Component = () => (
    <p className={className.paragraph}>
        <Head><style dangerouslySetInnerHTML={{__html: css}} /></Head>
        bazinga
    </p>
);

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        ["wrap-in-js", {
            "extensions": ["css$"]
        }]
    ]
}

next.config.js
注意exports-loader的惊人技巧。肯定有更好的方法了吗？？？

module.exports = {
    webpack: (config) => {
        config.module.rules.push(
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'emit-file-loader',
                        options: {
                            name: 'dist/[path][name].[ext]'
                        }
                    },
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'val-loader'
                    },
                    {
                        loader: 'exports-loader',
                        options: {
                            0: 'exports[0][1]',
                            1: 'exports.locals'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        );

        return config;
    }
};

thomaslindstrom 于 2017-02-14

👍7

我自己想出了一个解决方案，它与@satazor在线程中更高https :

只需在next.config.js添加几行即可：

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      loader: 'emit-file-loader',
      options: {
        name: 'dist/[path][name].[ext]',
      }
    }, {
      test: /\.css$/,
      loader: 'babel-loader!next-css-json-loader',
    });
    return config;
  },
};

样式作为js对象导入，因此可以很容易地与glamor和类似的解决方案一起使用：

// .css files now conveniently expose all styles as js objects
import styles from 'some-package/styles.css';
import { css } from 'glamor';
// ...
<div {...css(styles)}>
  this is a nice box. 
</div>

干杯! 🍻:)

jozanza 于 2017-02-16

👍5

有没有办法使降价文件作为字符串导入呢？我目前正在使用原始加载程序，但由于它是一个webpack插件，因此无法在服务器上运行。

kristojorg 于 2017-02-28

@kristojorg

我刚刚编写了一个用于markdown导入的babel插件。现在在我的手机上，但是如果您查看我的GitHub，就会看到它。

khrome83 于 2017-02-28

@ khrome83听起来很棒。期待尝试

rauchg 于 2017-02-28

谢谢@ khrome83！我试试看

kristojorg 于 2017-02-28

我必须非常快地执行此操作，因此没有更新自述文件。但是您只需将其作为babel插件包含在内，然后使用

从“ File.md”导入文件；

khrome83 于 2017-02-28

我知道了，谢谢！很有帮助

kristojorg 于 2017-03-01

这是题外话，但由于问题已关闭，我可以自由阐述:)

对于降价，您可以做两件事。

（1）
一种是将markdown文件作为字符串包括在内，然后在运行时将其转换为html / react。您可以使用通用wrap-in-js babel加载程序来完成此操作，将其注册为markdown文件扩展名，就像在next.js示例examples/with-globa-stylesheet/.babelrc for CSS中所使用的那样。

（2）
您可以做的另一件事是在翻译时使用markdown-in-js转换markdown
在某些情况下这可能会更有趣，因为markdown文档已经预先渲染，因此在运行时它更快（它只执行js）。另外，该库允许您注入自定义的React组件。不幸的是，在这种情况下，您必须像这样在source.js内嵌markdown。

如果您选择（2），则还知道有一个atom插件为markdown-in-js语法提供语法亮点，称为language-markdown-in-js

davibe 于 2017-03-01

@davibe谢谢您的提示！我宁愿将markdown解析为构建时间，但markdown-in-js的唯一问题是在编写:(。时，转义了反引号。？

kristojorg 于 2017-03-02

@kristojorg

有她的降价渲染。我写插件的原因是一样的。我将markdown拉成字符串，然后通过react-markdown运行它。这越来越有效，因为我可以传入react组件来表示markdown渲染片段，例如List组件来处理所有列表。与Styled JSX兼容。

khrome83 于 2017-03-02

有什么更新吗？通过上面的评论，我看到目前仍然没有完美的解决方案。
@阿鲁诺达
是否可能有一个使用isomorphic-style-loader的示例-https: //www.npmjs.com/package/isomorphic-style-loader？

那将是完美的！

lenny0702 于 2017-03-28

😕7 👍3 ❤1

从npm包导入反过来又导入.css或.scss文件的组件时，有人有解决方案吗？所以基本上是转译从node_modules导入的文件

Yuripetusko 于 2017-05-15

👍4

我已经使用Create-React-App（CRA）几周了，但是今天我遇到了Next.js，我感到非常兴奋，因为CRA当前不支持服务器端渲染（SSR），这实在令人遗憾。
我很想立即使用Next.js来提供SSR支持，但是无法导入.scss文件使我受挫。
有没有人找到将SASS加载程序添加到Webpack配置的方法？

cr101 于 2017-05-16

👍21

同意cr101，但不支持CSS / SASS意味着我不得不放弃像foundation这样的CSS框架，这对我来说不是一个选择。

dakt 于 2017-05-25

😕9

我正在使用@davibe提供的中断了他拥有的解决方案。

如果有人找到解决方法，将不胜感激。由于存在安全漏洞，因此绝对有必要更新至2.4.1，因此我没有退缩的选择。

tgoldenberg 于 2017-06-06

👍2

@Yuripetusko @ cr101 @tgoldenberg绝对同意。老实说，我认为开箱即用真的很棒。即使是硬编码的结构，一切都可以（例如强制性的/pages目录， /static等）。但是完全不受支持的scss模块对我们来说是一件坏事。我们有一个非常复杂的scss结构，它具有自动断点和所有内容的宽高比重新计算功能。我们努力工作以使我们的结构如此完美。下一步很棒，因为我们不能只丢弃当前存在的所有scss东西。不支持的scss是唯一但最关键的事情，它使我们无法迁移到这个漂亮的工具。

dvakatsiienko 于 2017-06-20

👍8

实际上，＃1615-正在进行一些操作。 @timmywil正在尝试设置isomorphic-style-loader与next 。欢迎所有有兴趣的人参加。

dvakatsiienko 于 2017-06-20

我尝试了该线程所指向的每个解决方案，但是可以使其中任何一个起作用。因此，我决定尝试自己尝试一下，并将其记录在这里

almeynman 于 2017-06-23

👍1

@almeynman谢谢！肯定会看看您的方法！
顺便说一句，我已经成功地使scss由以下几个模块的工作这个例子。我所做的只是添加了sass-loader并启用了源地图。

dvakatsiienko 于 2017-06-23

我设法以这种方式使next.js CSS（甚至是SCSS）。

首先，在next.config.js ，通过添加给定的加载器和DefintPlugin实例来调整webpack配置。

const webpack = require('webpack');

module.exports = {
  webpack: (config, {dev}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      exclude: /node_modules/,
    });

    config.plugins.push(
      new webpack.DefinePlugin({
        "process.env": {
          // flag to indicate this is for browser-side
          BROWSER: JSON.stringify(true),
       }
      })
    );

    return config;
  }
};

然后，在组件代码中，要求带有条件的样式文件。这可以确保只有浏览器端绑定才会具有样式模块。

if (process.env.BROWSER) {
  require("./style.scss");
}

如果您不介意if (process.env.BROWSER) ，它会完美地工作。

mocheng 于 2017-06-29

👍3

一个好的方法在这里

almeynman 于 2017-07-04

@almeynman IMO并不是一个很好的方法，因为您要在每个页面上加载整个网站的CSS代码，而不是仅加载与该页面相关的CSS样式。
仅导入所需的.scss文件而不是整个网站的CSS即可通过仅加载所需的CSS代码来大大减少页面的大小。

cr101 于 2017-07-22

@ cr101您好，我不知道。我没有真正使用过该设置，只是将其发布以供其他参考（我认为这很好...）。我仍然使用博客文章中描述

almeynman 于 2017-07-24

如果有人感兴趣，请查看更多示例和讨论：

https://github.com/iaincollins/nextjs-starter
https://github.com/zeit/next.js/issues/2534
https://github.com/zeit/next.js/tree/v3-beta/examples/with-global-stylesheet

基于上述内容和该线程，我能够使用PostCSS进行转换：

全局SCSS文件（模块是相同的，您只需要一个入口点即可预编译所有CSS以进行生产）。
单独的第三方CSS，带有通过相对URL引用的自定义字体（通过内联魔术解决）。

放入/static/styles/app.css的单个CSS文件中以在生产中投放，并且热重装仍然有效。注意styled-jsx的用法，但是可以通过使用<style dangerouslySetInnerHTML={} />

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // keep this first
    require("postcss-url")({ url: "inline" })
  ]
};

next.config.js

加载程序以dev模式转换.scss以进行热重载，并提取到prod中的单个.css文件。这给了我build/app.css等生产版本，我添加cp build/app.css static/styles/app.css后next build有它的静态出口可在自定义标题中嵌入如下图所示。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

export default {
  webpack: (config, { dev }) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        ...(dev
          ? [
              {
                test: /\.css$/,
                use: ['raw-loader', 'postcss-loader']
              },
              {
                test: /\.s(a|c)ss$/,
                use: [
                  'raw-loader',
                  {
                    loader: 'postcss-loader',
                    options: {
                      sourceMap: true
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true
                    }                    
                  }
                ]
              }
            ]
          : [
              {
                test: /\.(css|scss)/,
                use: ExtractTextPlugin.extract({
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        importLoaders: 2,
                        modules: false,
                        url: true,
                        minimize: true,
                        localIdentName: '[hash:base64:5]'
                      }
                    },
                    {
                      loader: 'postcss-loader'
                    },
                    {
                      loader: 'sass-loader'
                    }
                  ]
                })
              }
            ]),
        {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'url-loader?limit=100000&&name=[name].[ext]?[hash:8]'
        }
      ]
    },
    plugins: [
      ...config.plugins,
      ...(dev ? [] : [new ExtractTextPlugin('app.css')])
    ]
  }),
};

自定义标题

const inlineCSS =
  process.env.NODE_ENV !== ENV_PRODUCTION && require('styles/index.scss');
...
      <Head>
        {inlineCSS && <style jsx global> {__html: inlineCSS} </style>}
          {process.env.NODE_ENV === ENV_PRODUCTION &&
            <link
              rel="stylesheet"
              type="text/css"
              href={`/static/styles/app.css?${this.props
                .__NEXT_DATA__.buildId}`}
            />}
      </Head>

希望这可以帮助。让我知道是否有人需要进一步澄清。期待更多解决方案。希望有人最终会提出一个好的插件，因为它仍然是相当棘手和繁重的集成。

cheshirecode 于 2017-07-24

与其将所有.scss文件提取到一个CSS文件中，不如将每个导入的.scss文件编译成自己的CSS文件会更好。这样，您将仅在每个页面上加载所需的CSS样式。
我不知道你会怎么做。

cr101 于 2017-07-24

请检查我的请求请求，我认为我有一个好的解决方案：
https://github.com/zeit/next.js/pull/2638

pencilcheck 于 2017-07-24

@ cr101确实是这样。我们正在将自己的内部UI库导入到不同的项目中，因此总是要加载很大的文件块（我知道这并不理想，仍在对该野兽进行模块化）。这是从compile and serve 1 file到X number of files at X locations的下一步。当您将权衡因素分解为较小的CSS块与外部可缓存且性能良好的CDN托管版本时，它会变得更加复杂，因此我认为这很有趣，但需要自己参与项目。编辑-绝对超出Next打算处理的范围，我们最好的目标是Next插件或模式。

cheshirecode 于 2017-07-25

不确定是否存在性能问题，但是如果您使用样式组件或类似组件，这是一个非常简单的解决方案，只需制作一个CSS包装器即可：

import styled from 'styled-components';

const Collapse = props => (
  <__Collapse>
    { props.children }
  </__Collapse>
);

export default Collapse;

/**
 * CSS
 */
const __Collapse = styled.div`
  .rc-collapse {
    background-color: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
  }
  ...
`;

import RcCollapse from 'rc-collapse';
import Collapse from '~/components/rc/Collapse';

const HelpPage = () => (
  <Collapse>
    <RcCollapse>
      <RcCollapse.Panel header="Title">Content</RcCollapse.Panel>
    </RcCollapse>
  </Collapse>
);

我喜欢这种方法的地方是，我可以从源CSS进行自定义（无论如何，我大多数时候都需要这样做），而如果导入了.css ，则不必在原始规则之上编写覆盖来自node_modules .css文件。

chhuang 于 2017-08-01

🎉1 👍1

这是使用babel-plugin-inline-import导入CSS文件的简单解决方案：

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ]
}

页面/组件

import "prismjs";

import { PrismCode } from "react-prism";
import prismGlobalStyles from "prismjs/themes/prism.css";

export default () => {
    return (
        <div>
            <style global jsx>
                {prismGlobalStyles}
            </style>
            <PrismCode className="language-javascript">
                {`function(noop) {
                    return noop;
                }`}
            </PrismCode>
            {/* ... */}
        </div>
    );
};

stovmascript 于 2017-08-29

👍34 🎉5 😄3 ❤1 😕1

@stovmascript这是一个

hilarykitz 于 2017-09-04

👍2

@hilarykitz ， @stovmascript解决方案对我有用，您能给我们您遇到的错误吗？

Tzelon 于 2017-10-12

@stovmascript-您如何摆脱babel缓存。

制作CSS文件
导入文件
应用
更改CSS文件-添加新的选择器和样式
见证Babel Cache保留旧版本

khrome83 于 2017-10-15

@ khrome83，您需要清除node_modules / .cache

pungggi 于 2017-10-17

我找到了使用babel-inline-loader插件的更好的解决方案，该插件可以清除缓存并与上述方法一起使用。该方法的问题在于，您只能应用全局样式。当在非<style jsx global>标记中使用时，它不会正确添加data-jsx来达到目的。

khrome83 于 2017-10-17

👍1

我找到了使用babel-inline-loader插件的更好的解决方案，该插件可以清除缓存并与上述方法一起使用。该方法的问题在于，您只能应用全局样式。当在非

chibicode 于 2017-10-23

我使用@stovmascript的解决方案添加了一个示例：

https://github.com/zeit/next.js/pull/3157

chibicode 于 2017-10-23

您如何包括多个外部CSS？
我在同一个组件中使用2个需要它的库，每个库分别工作，但是我不知道如何组合它们。

import rtStyle from 'react-table/react-table.css';
import dpStyle from 'react-datepicker/dist/react-datepicker.css';
...
render() {
    return (
      <div>
        {/* <style jsx global>{ rtStyle }</style> */}
        <style jsx global>{ dpStyle }</style>
...

CHarnel 于 2017-11-16

@通道尝试<style jsx global>{ rtStyle }{dpStyle}</style>

almeynman 于 2017-11-16

@almeynman得到这个：

Module build failed: SyntaxError: C:/.../components/activeUsersTable.js: 
Expected one child under JSX Style tag, but got 2 (eg: <style jsx>{`hi`}</style>)

CHarnel 于 2017-11-16

@CHarnel尝试将两者都放入模板字符串中

almeynman 于 2017-11-16

@通道尝试这种方法
<style jsx global>{ $ {rtStyle} $ {dpStyle} }</style>

alanhr 于 2017-11-27

😕1

@alanhr

我尝试将这些CSS放在一个js文件中并导出

import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
import styles from './index.css'

export default bootstrap + styles

然后就

import styles from '../styles'
...
<style jsx global>{styles}</style>

comus 于 2017-11-30

👍4

使用我创建的https://github.com/sheerun/extracted-loader，您可以将ExtractTextPlugin用于开发和生产，而无需在开发中使用不同的html或将CSS注入js。

sheerun 于 2017-12-09

👍1

@comus我使用了您的方法，效果很好，谢谢。

CHarnel 于 2017-12-11

@sheerun不错，谢谢

edmondnyaigoti 于 2017-12-12

❤1

我已经向next.js提交了更全面的示例：
https://github.com/zeit/next.js/pull/3451

sheerun 于 2017-12-13

👍4

这曾经在nextjs v4之前工作

<style jsx global>{style}</style> <style jsx global>{colors}</style> <style jsx global>{layout}</style>

使用此方法加载jsx全局样式的原因是什么？ <style jsx global>{ rtStyle }{dpStyle}</style>

mihaiserban 于 2018-01-18

我已经根据emit-files-loader提出了自己的解决方案。如果有人感兴趣，我可以在此处发布它，但是它依赖于自定义服务器设置-基本上，您需要能够在.next build dir中静态提供单个目录。可以通过不依赖服务器的/_next/...服务器路径结构来配置它。

除此之外，您可以编写import stylesheet from './styles/style.[scss|less|stylus|w/e]'; ，这将是样式表文件的公共路径，因此您可以将其放在<link> 。它包括用于永久缓存的?[hash]并进行热重装。

nikolakanacki 于 2018-02-02

@nikolakanacki官方支持即将推出🙏https ://github.com/zeit/next.js/pull/3578

timneutkens 于 2018-02-02

🎉3

@timneutkens我看过这个，是否有关于“很快”的估计？我看到它已经在金丝雀中。
我只是立即需要一个解决方案，花了2-3天的时间寻找解决方案，然后设法编写自己的解决方案，这基本上是一个“简单的解决方案”。我什至在考虑将其与extract-text-webpack-plugin组合在一起，这样就可以静态地加入所有单独的.[css|stylus|less|scss]文件，并将它们作为单个静态资源使用，就像通常不需要下一步一样。

我认为这些问题背后的主要问题是，在生产和开发构建的背后，发生了很多“魔术”，其中包括热重载和填充...人们可能会读懂源代码并了解如何将它们组装在一起，但如果构建它的人为此写了一些文档，那真是太棒了，我认为会有更多人参与。

nikolakanacki 于 2018-02-02

@nikolakanacki很快🙏

我甚至还在考虑将其与extract-text-webpack-plugin组合在一起，以便可以将所有单独的。[css | stylus | less | scss]文件静态加入，并像通常那样将它们全部作为单个静态资源使用，而无需下一步。

我为下一个v5编写的插件已经做到了，它们将很快开源👍

关于编写内部文档，我们计划记录v5退出后一切正常

timneutkens 于 2018-02-02

❤10 👍2 👎1

@timneutkens谢谢！

jameskennethrobinson 于 2018-02-02

@timneutkens感谢您的更新，请在此内容登陆后在此处发布更新！

nikolakanacki 于 2018-02-05

有什么消息吗？

fireworkerCZ 于 2018-06-09

我不确定您还期待其他什么消息🤔

该版本在Next.js v5中发布。
甚至在自述文件中https://github.com/zeit/next.js#importing -css--sass--less--stylus-files

此外，提到的PR已合并，并且此问题已解决。

timneutkens 于 2018-06-09

只需在根项目中创建/ static文件夹，然后将您的file.css放在/ static中，然后到html头文件。

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

然后在任何地方使用className！

nguyenvanphuc2203 于 2018-10-09

@comus

非常全面和聪明。.谢谢您..我整天都在寻找这种解决方案。

pavinduLakshan 于 2018-12-29

只需在根项目中创建/ static文件夹，然后将您的file.css放在/ static中，然后放入Header html结构文件即可。
import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>
然后在任何地方使用className！

在应用程序的根目录（package.json文件所在的位置）中创建一个“ public”文件夹。

mrpeski 于 2019-12-01

正在通过＃8626添加支持！

Timer 于 2019-12-01

此页面是否有帮助？

0 / 5 - 0 等级

Next.js: 导入CSS文件？

最有用的评论

所有102条评论

postcss.config.js

next.config.js

自定义标题

相关问题