nextJS / webpack：如何處理帶有字體的SASS文件

Question

我正在嘗試將我的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經驗不足。

Answer 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