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。 這是下面的鏈接以供其他參考。

如何在 NextJS 配置文件中組合多個加載器（CSS、LESS、ttf 等）？

但是下面的代碼應該可以解決您的問題：

安裝

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";