javascript - 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'

注意:注意格式不正确的 vendor 库，在这种情况下您应该按如下方式导入:

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