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

反应 - 与cssModules和URL装载机Next.js配置

1 个答案: