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

nextJS / webpack：如何使用font处理SASS文件

1 个答案: