【问题标题】：How to load CSS module with next.js如何使用 next.js 加载 CSS 模块
【发布时间】：2019-12-01 06:28:59
【问题描述】：

我正在尝试在我的 react 应用程序中使用 react-datepickermodule，但我很难尝试加载 react-datepicker 的 css 模块。我正在使用 next.js 在服务器端呈现我的应用程序。

我尝试实现 next 提供的 css 加载器来解决此类问题，但尝试构建我的应用时出错： error

我的 component.js 文件：

import DatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';

我的 nex.config.js 文件：

const withImages = require('next-images');
const withCSS = require('@zeit/next-css');

module.exports = withImages(
    withCSS({
        cssModules: true
    })
);

你能告诉我我的导入或配置有什么问题吗？或者“最小化”属性（显示在错误消息上）是什么意思？

非常感谢

编辑：我最终直接从 <link href="/static/react-datepicker.css" rel="stylesheet" />。 Original post

【问题讨论】：

标签： javascript node.js reactjs vue.js next.js

【解决方案1】：

尝试在配置文件中使用 Compose

我认为您需要像这样编写插件

// ... other imports
const compose = require('next-compose');

module.exports = compose([
  withImages(),
  withCss(),
  {
    webpack: (config) => {
      /**some special code */
      return config
    }
  }
]);

插件详情请见here

【讨论】：

感谢您的回答。我在尝试您的配置时收到相同的错误消息
next-compose 只是有效的语法糖，去掉了withPluginA(withPluginB(withPluginC(....))) 的长链代码

【解决方案2】：

您的代码很好！不要将 CSS 导入到组件中，而是尝试将其导入到您想要使用它的页面中。

Next.js 仅支持自定义页面 CSS 导入。

【讨论】：

【解决方案3】：

您的 css 模块必须以 .module.css 结尾。

要使用 CSS 模块，请从任何组件导入名为 *.module.css 的 CSS 文件。 ^src

【讨论】：

【解决方案4】：

改为以这种方式导入：

import styles from 'react-datepicker/dist/react-datepicker-min.module.css'

【讨论】：