使用 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 软件包后修复的

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

Loading external scss files with next.js (react)

sass

npm

reactjs

server-side-rendering

next.js