用next.js加载外部scss文件（反应）

Question

从zeit加载SaSS文件失败，并出现以下错误

node_modules\@zeit\next-css\node_modules\mini-css-extract-plugin\dist\index.js:21} = _webpack2.default;
^TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.

next.config.js

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

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
    }
  }))

样式表位于src下>样式表文件夹

参考https://dev.to/harveyjones282/the-simplest-way-to-configure-next-js-with-sass-3en

感谢任何反馈：）

Answer 1

前段时间我遇到了相同的错误，我不完全记得我是如何登陆这里的，但是这段代码有效-

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

const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack')

function HACK_removeMinimizeOptionFromCssLoaders(config) {
  console.warn(
    'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
  )
  config.module.rules.forEach(rule => {
    if (Array.isArray(rule.use)) {
      rule.use.forEach(u => {
        if (u.loader === 'css-loader' && u.options) {
          delete u.options.minimize
        }
      })
    }
  })
}

module.exports = withSASS(
  {
      webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config)
        config.plugins.push(new webpack.EnvironmentPlugin(localEnv))

        return config
      }
  }
)

尝试以此替换您的next.config.js文件中的代码，安装必需的依赖项，如dotenv，next-sass。并重新运行服务器以使更改生效。

Answer 2

在安装最新的next.js程序包后已修复