nextJS/webpack：如何处理带有字体的 SASS 文件答案

【问题标题】：nextJS/webpack: How to handle SASS files with fontnextJS/webpack：如何处理带有字体的 SASS 文件
【发布时间】：2017-10-24 08:49:35
【问题描述】：

我正在尝试配置我的 nextJS 应用程序的 webpack 来处理一些 SASS 文件，如下所示：

@font-face
  font-family: 'Marcellus'
  font-style: normal
  font-weight: 400
  src: local('Marcellus-Regular'), url('/fonts/marcellus/Marcellus-Regular.ttf') format('truetype')

@ 给了我一个意外的令牌错误。所以我尝试添加一些自定义的 webpack 配置：

module.exports = {
  webpack: function (config) {
    config.module = {
      rules: [
        { test: /(\.sass$)/, loaders: ['sass-loader'] },
        { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
        { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
      ]
    }
    return config
  }
}

有了这个 *.js 文件不再被识别，我不太确定 SASS 文件是否正确加载。我对 webpack 非常陌生。

【问题讨论】：

标签： javascript webpack nextjs

【解决方案1】：

你需要为SASS文件添加多个加载器：

    test: /\.sass$/,
        use: [{
            loader: 'style-loader', // creates style nodes from JS strings
        }, {
            loader: 'css-loader', // translates CSS into CommonJS
        }, {
            loader: 'sass-loader', // compiles Sass to CSS
        }],

来源：Sass-loader

【讨论】：