React - 带有 cssModules 和 url-loader 的 Next.js 配置

Question

我需要配置 next.config.js 文件以便同时使用两个不同的加载器。 这是第一个：

const withSass = require('@zeit/next-sass');

module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
})

这是第二个：

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass({
    webpack (config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        })
        return config
    }
}))

单独他们工作得很好！ 但是我无法将它们组合在一个规则中，以便两者可以一起工作。

感谢您的帮助！！

Answer 1

您应该使用 next-compose-plugins。这是下面的链接以供其他参考。

How can I combine multiple loaders (CSS, LESS, ttf, etc) in NextJS config file?

但下面的代码应该可以解决您的问题：

安装

yarn add --dev @zeit/next-css
yarn add --dev @zeit/next-sass file-loader url-loader

更新您的 next.config.js 文件

const withPlugins = require('next-compose-plugins');
const sass = require("@zeit/next-sass")
const css = require("@zeit/next-css")

const nextConfig = {
  webpack: function (config) {
  config.module.rules.push({
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
    use: {
    loader: 'url-loader',
      options: {
        limit: 100000,
        name: '[name].[ext]'
      }
    }
  })
  return config
  }
}

module.exports = withPlugins([
  [css],
  [sass, {
     cssModules: true
   }]
], nextConfig);

注意：您现在应该可以像这样导入 scss 模块了：

import styles from 'your-file-name.module.scss'

注意：请注意格式不正确的供应商库，在这种情况下您应按如下方式导入：

import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";