如何使 SASS 可用于 NextJS 中的自定义 Webpack 实现？

Question

我正在尝试使用 sass-resources-loader 让我的 SASS 变量在我的所有 SASS 文件中可用，但看起来 SASS 不可用到这个装载机。

next-sass 包文档建议您可以包装配置对象，以便使 sass 可用。例如 withSass({configHere}).

但是我收到的错误表明 SASS 加载程序不可用。

配置：

const path = require('path');
const withSass = require('
@zeit
/next-sass');

const globalSass = [
  path.join(process.cwd(), 'stylesheets/variables/_variables.scss'),
  path.join(process.cwd(), 'stylesheets/tools/_tools.scss')
]

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    // Perform customizations to webpack config
    // Important: return the modified config
    config.module.rules.push({
      loader: "sass-resources-loader",
      options: {
        resources: globalSass
      }
    })

    return config
  }
})

我收到这个错误：

Module parse failed: Unexpected token (1:15)
You may need an appropriate loader to handle this file type.
> $font-size-base: 14px;
| $font-size-large: ceil(($font-size-base * 1.25));
| $font-size-small: ceil(($font-size-base * 0.85));

@multi ./node_modules/next/dist/client/next-dev

其中 $font-size-base 等在 "sass-resources-loader" 处理的变量 SASS 文件中。

谁能告诉我这里可能做错了什么？

Answer 1

我有几个建议。

您的规则没有测试：

test: /\.scss$/

您可能还需要先将 sass-resources-loader 强制为运行，在其他加载程序之前，使用：

enforce: 'pre'

所以，试试这个配置：

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.module.rules.push({
      enforce: "pre",
      test: /\.scss$/,
      loader: "sass-resources-loader",
      options: {
        resources: globalSass
      }
    })

    return config
  }
})

希望这对你有用。

如何使 SASS 可用于 NextJS 中的自定义 Webpack 实现？

How to make SASS available to custom Webpack implementation in NextJS?

webpack

sass

next.js